import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { useColorScheme } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import AppNavigator from './src/navigation/AppNavigator';
import AnimatedSplash from './src/screens/AnimatedSplash';
import * as SplashScreen from 'expo-splash-screen';
import * as SystemUI from 'expo-system-ui';
import { AppLightTheme, AppDarkTheme } from './src/navigation/themes';

SplashScreen.preventAutoHideAsync();

export default function App() {
  const [isSplashFinished, setSplashFinished] = useState(false);
  const colorScheme = useColorScheme();

  const backgroundColor = colorScheme === 'dark' ? AppDarkTheme.colors.background : AppLightTheme.colors.background;
  SystemUI.setBackgroundColorAsync(backgroundColor);

  return (
    <SafeAreaProvider>
      <NavigationContainer theme={colorScheme === 'dark' ? AppDarkTheme : AppLightTheme}>
        <AppNavigator />
        <StatusBar style={colorScheme === 'dark' ? "light" : "dark"} />
      </NavigationContainer>

      {!isSplashFinished && (
        <AnimatedSplash onFinish={() => setSplashFinished(true)} />
      )}
    </SafeAreaProvider>
  );
}