import { Stack, Tabs } from "expo-router";
import { DataContextProvider } from "../src/contexts/data_context";
import { LIGTHT_THEME } from "../src/constants/theme";
import { AuthContextProvider, useAuth } from "../src/contexts/auth_context";
import { ActivityIndicator } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function Root() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <DataContextProvider>
        <AuthContextProvider>
          <MainLayout />
        </AuthContextProvider>
      </DataContextProvider>
    </GestureHandlerRootView>
  );
}

const MainLayout = () => {
  const { isLoading } = useAuth();

  if (isLoading) {
    return <ActivityIndicator />;
  }
  
  return (
    <Stack initialRouteName="(tabs)" >
      <Stack.Screen name="(tabs)" options={{ headerShown: false, statusBarColor: LIGTHT_THEME.color.primary }} />
      <Stack.Screen
        name="state"
        options={{
          headerShown: false,
          statusBarColor: LIGTHT_THEME.color.primary,
        }}
      />
      <Stack.Screen
        name="login"
        options={{
          title: "Login",
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="sign_up"
        options = {
          {
            headerShown: false
          }
        }
      />
      <Stack.Screen
        name="profile"
        options={{
          title: "Profile",
          headerShown: false,
        }}
      />
    </Stack>
  );
};
