import 'react-native-gesture-handler';

import { StatusBar } from 'expo-status-bar';
import { useEffect } from 'react';
import { ActivityIndicator, StyleSheet, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import { AppNavigation } from './src/navigation/AppNavigation';
import { AuthProvider, useAuth } from './src/state/auth/AuthContext';
import './src/i18n';

export default function App() {
  return (
    <SafeAreaProvider>
      <AuthProvider>
        <AppBootstrap />
      </AuthProvider>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

function AppBootstrap() {
  const { isHydrating, hydrate } = useAuth();

  useEffect(() => {
    hydrate();
  }, [hydrate]);

  if (isHydrating) {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" />
        <StatusBar style="auto" />
      </View>
    );
  }

  return (
    <>
      <AppNavigation />
      <StatusBar style="auto" />
    </>
  );
}
