import { QueryClientProvider } from '@tanstack/react-query';
import { registerRootComponent } from 'expo';
import { useFonts } from 'expo-font';
import React from 'react';
import { LogBox } from 'react-native';
import FlashMessage from 'react-native-flash-message';

import Routes from './components/Routes/Routes';
import { AppLoadingProvider } from './hooks/useAppLoading';
import { SplashScreenProvider } from './hooks/useSplashScreen';
import { StorageProvider } from './hooks/useStorage';
import { client } from './services/reactQuery/client';

const App = () => {
  const [fontsLoaded] = useFonts({
    Panton: require('../assets/fonts/panton-regular-webfont.ttf'),
    Montserrat: require('../assets/fonts/Montserrat-Regular.ttf'),
  });

  LogBox.ignoreAllLogs();

  return (
    <StorageProvider>
      <SplashScreenProvider>
        <AppLoadingProvider>
          <QueryClientProvider client={client}>
            {fontsLoaded && (
              <>
                <Routes />
                <FlashMessage position="top" />
              </>
            )}
          </QueryClientProvider>
        </AppLoadingProvider>
      </SplashScreenProvider>
    </StorageProvider>
  );
};

export default registerRootComponent(App);
