import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { BrowserRouter as Router } from 'react-router-dom';
import RememberMe from './components/RememberMe';
import { ClientContextProvider } from './context';
import ThemeProvider from './context/ThemeProvider';
import { UserStateProvider } from './context/UserContext';
import Routes from './Routes';
import darkTheme from './styles/darkTheme';

const queryClient = new QueryClient();

function App(): React.ReactElement {
  return (
    <QueryClientProvider client={queryClient}>
      <ClientContextProvider>
        <UserStateProvider>
          <RememberMe>
            <ThemeProvider theme={darkTheme}>
              <Router>
                <Routes />
              </Router>
            </ThemeProvider>
          </RememberMe>
        </UserStateProvider>
      </ClientContextProvider>
    </QueryClientProvider>
  );
}

export default App;