import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} 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 { toastConfig } from "@/config";
import { toastConfig } from "@/config";
import { setRouterInstance } from "@/config/auth";
import "@/global.css";
import { I18nProvider } from "@/hooks/use-i18n";
import {
  ThemeProvider as AppThemeProvider,
  useThemeContext,
} from "@/hooks/use-theme-context";
import Toast from "react-native-toast-message";
import "../global.css";
function AppContent() {
  const router = useRouter();
  const { colorScheme } = useThemeContext();
  console.log("Color Scheme: ", colorScheme);

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

  return (
    <ThemeProvider 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} />
    </ThemeProvider>
  );
}

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