import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider as NavigationThemeProvider,
} from "@react-navigation/native";
import { Stack, useRouter } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import "react-native-reanimated";
// import Toast from "react-native-toast-message";

import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider/gluestack-ui-provider";
import { toastConfig } from "@/config";
import { setRouterInstance } from "@/config/auth";
import "@/global.css";
import { ThemeProvider, useThemeContext } from "@/hooks/use-theme-context";
import { I18nProvider } from "@/hooks/use-i18n";
import Toast from "react-native-toast-message";
import "../global.css";
function AppContent() {
  const { colorScheme } = useThemeContext();
  const router = useRouter();

  useEffect(() => {
    setRouterInstance(router);
  }, [router]);

  return (
    <GluestackUIProvider mode={colorScheme}>
      <NavigationThemeProvider
        value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
      >
        <Stack
          screenOptions={{ headerShown: false }}
          initialRouteName="auth/login"
        >
          <Stack.Screen
            name="auth/login"
            options={{
              title: "Login",
              headerShown: false,
            }}
          />

          <Stack.Screen
            name="(tabs)"
            options={{
              title: "Home",
              headerShown: false,
            }}
          />

          <Stack.Screen
            name="modal"
            options={{ presentation: "formSheet", title: "Modal" }}
          />
        </Stack>
        <StatusBar style="auto" />
        <Toast config={toastConfig} visibilityTime={2000} topOffset={60} />
      </NavigationThemeProvider>
    </GluestackUIProvider>
  );
}

export default function RootLayout() {
  return (
    <I18nProvider>
      <ThemeProvider>
        <AppContent />
      </ThemeProvider>
    </I18nProvider>
  );
}
