import React, { useState } from 'react';
import { LogBox, StatusBar } from 'react-native';
import 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Asset } from 'expo-asset';
import AppLoading from 'expo-app-loading';
import * as Updates from "expo-updates";
import { NavigationContainer } from '@react-navigation/native';
import { QueryClient, QueryClientProvider } from 'react-query';
import { AuthProvider } from './src/lib/auth/AuthContext';
import MainTabsNavigator from './src/navigation/MainTabsNavigator';
import { NotifProvider } from './src/lib/auth/NotificationContext';

/**
 * The root app component.
 * @component
 */
const App: React.FC = () => {
  LogBox.ignoreAllLogs();
  const queryClient = new QueryClient();

  const [loading, setLoading] = useState(false);
  const _cacheResourcesAsync = async () => {
    const images = [
      require('./assets/logo-white.png'),
      require('./assets/cover-dark.png'),
      require('./assets/cover.jpg'),
      require('./assets/default-pfp.png'),
      require('./assets/pothole.png'),
      require('./assets/roadblock.png'),
      require('./assets/barrier.png'),
      require('./assets/bump.png'),
      require('./assets/information.png'),
      require('./assets/washroom.png'),
      require('./assets/park.png'),
    ];

    const cacheImages = images.map(image => {
      return Asset.fromModule(image).downloadAsync();
    }); 

    Promise.all(cacheImages);
  }

  if (loading) {
    return (
      <AppLoading
        startAsync={_cacheResourcesAsync}
        onFinish={() => setLoading(false)}
        onError={console.warn}
      />
    ); 
  }

  return <SafeAreaProvider>
            <QueryClientProvider client={queryClient}>
              <AuthProvider>
                <NotifProvider>
                  <NavigationContainer>
                    <StatusBar />
                    <MainTabsNavigator />
                  </NavigationContainer>
                </NotifProvider>
              </AuthProvider>
            </QueryClientProvider>
        </SafeAreaProvider>
}

export default App;