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 { 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}>
			<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>
		</Provider>
	);
}
