import i18next, { getLanguage } from "../services/i18n/index";
import { Stack, useRouter } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { useEffect, useState } from "react";
import "react-native-reanimated";
import { I18nextProvider } from "react-i18next";
import { Provider } from "react-redux";
import { store } from "@/store";
import { PaperProvider } from "react-native-paper";
import SnackbarProvider from "@/contexts/Snackbar";

export { ErrorBoundary } from "expo-router";

export const unstable_settings = {
  initialRouteName: "(tabs)",
};

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [appIsReady, setAppIsReady] = useState(false);
  const [shouldRedirect, setShouldRedirect] = useState(false);
  const router = useRouter();

  useEffect(() => {
    const initLang = async () => {
      const lang = await getLanguage();
      if (!lang) {
        setShouldRedirect(true);
      }
      setAppIsReady(true);
    };

    initLang();
  }, []);

  useEffect(() => {
    if (appIsReady) {
      SplashScreen.hideAsync();
      router.replace("/init/language");
    }
  }, [appIsReady]);

  // useEffect(() => {
  //   if (appIsReady && shouldRedirect) {
  //     router.replace("/init/language");
  //     setShouldRedirect(false);
  //   }
  // }, [appIsReady, shouldRedirect]);

  if (!appIsReady) {
    return null;
  }

  return <RootLayoutNav />;
}

function RootLayoutNav() {
  return (
    <PaperProvider>
      <SnackbarProvider>
        <Provider store={store}>
          <I18nextProvider i18n={i18next}>
            <Stack
              screenOptions={{
                headerShown: false,
                animation: "fade",
              }}
            >
              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            </Stack>
          </I18nextProvider>
        </Provider>
      </SnackbarProvider>
    </PaperProvider>
  );
}
