import ProvideQueryClient from "@components/providers_wrappers/ProvideQueryClient";
import { LOG } from "@logger";
import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
import { ThemeProvider } from "@shopify/restyle";
import { injectStoreIntoAxiosInstance } from "@/axios";
import { ModalsManagerProvider } from "@/contexts/ModalsManagerContext";
import { UserAuthenticationContextProvider } from "@/contexts/UserAuthenticationContext";
import { AppMainStackNavigatorAuthWrapper } from "@/navigations/AppMainStackNavigator";
import theme from "@/themes/Theme";
import "react-native-gesture-handler";
import "react-native-reanimated";
import { StatusBar } from "expo-status-bar";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { Provider } from "react-redux";
import { store } from "./src/redux";

const log = LOG.extend("App");
injectStoreIntoAxiosInstance(store);

export default function App() {
	log.verbose("App started...");
	return (
		<Provider store={store}>
			<GestureHandlerRootView style={{ flex: 1 }}>
				<ThemeProvider theme={theme}>
					<ModalsManagerProvider>
						<SafeAreaProvider>
							<ProvideQueryClient>
								<UserAuthenticationContextProvider>
									<NavigationContainer
										theme={{
											...DefaultTheme,
											colors: {
												...DefaultTheme.colors,
												background: "white",
											},
										}}
									>
										<AppMainStackNavigatorAuthWrapper />
										<StatusBar
											translucent
											backgroundColor="transparent"
											style="dark"
										/>
									</NavigationContainer>
								</UserAuthenticationContextProvider>
							</ProvideQueryClient>
						</SafeAreaProvider>
					</ModalsManagerProvider>
				</ThemeProvider>
			</GestureHandlerRootView>
		</Provider>
	);
}
