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 { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider/gluestack-ui-provider";
import { toastConfig } from "@/config";
import { setRouterInstance } from "@/config/auth";
import "@/global.css";
import { useColorScheme } from "@/hooks/use-color-scheme";
import Toast from "react-native-toast-message";
import "../global.css";
export default function RootLayout() {
  const colorScheme = useColorScheme();
  const router = useRouter();

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

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