import {useFonts} from 'expo-font';
import {Slot, Stack} from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import {useEffect} from 'react';
import 'react-native-reanimated';

import {AppProvider} from '@/context/AppProvider';
import {DarkTheme, DefaultTheme, ThemeProvider} from '@react-navigation/native';
import Toast from 'react-native-toast-message';
import {AutocompleteDropdownContextProvider} from 'react-native-autocomplete-dropdown';
import {useColorScheme} from '@/hooks/useColorScheme';

// Prevent the splash screen from auto-hiding before asset loading is complete.
// SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const colorScheme = useColorScheme();

  const [loaded] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
  });

  useEffect(() => {
    if (loaded) {
      // SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <AppProvider>
      <AutocompleteDropdownContextProvider>
        <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
          <Stack>
            <Stack.Screen name="(tabs)" options={{headerShown: false}}/>
            <Stack.Screen name="(onboarding)/start" options={{headerShown: false}}/>
          </Stack>
          <Toast/>
        </ThemeProvider>
      </AutocompleteDropdownContextProvider>
    </AppProvider>
  );
}