import 'react-native-gesture-handler';
import { QueryClientProvider } from '@tanstack/react-query';
import { NavigationContainer } from '@react-navigation/native';
import { queryClient } from 'src/utils/queryClient';

import Route from './Route';
import { ConnectionProvider } from 'src/contexts/ConnectionContext';
import ConnectionBanner from 'src/components/ConnectionBanner/ConnectionBanner';
import { RegionProvider } from 'src/contexts/RegionContext';
import { ErrorProvider, useError } from 'src/contexts/ErrorContext';
import { useEffect } from 'react';
import { setupInterceptors } from 'src/utils/request';
import { ErrorModal } from 'src/components';

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <ErrorProvider>
        <InnerApp />
      </ErrorProvider>
    </QueryClientProvider>
  );
};

const InnerApp = () => {
  const errorContext = useError();

  useEffect(() => {
    setupInterceptors(errorContext);
  }, [errorContext]);

  return (
    <ConnectionProvider>
      <RegionProvider>
        <NavigationContainer>
          <ConnectionBanner />
          <Route />
          <ErrorModal />
        </NavigationContainer>
      </RegionProvider>
    </ConnectionProvider>
  );
};

export default App;