import { StrictMode } from 'react';
import { HelmetProvider } from 'react-helmet-async';
import {
  createBrowserRouter,
  RouterProvider,
  createRoutesFromElements,
  Route,
} from 'react-router-dom';
import { createRoot } from 'react-dom/client';
import { ReactQueryDevtools } from 'react-query/devtools';

import { wrapCreateBrowserRouterV6 } from '@sentry/react';

import { StyledEngineProvider } from '@material-hu/mui/styles';

import { SnackbarProvider } from '@material-hu/components/design-system/Snackbar';
import 'nprogress/nprogress.css';
import 'react-perfect-scrollbar/dist/css/styles.css';
import 'src/config/amplitude';
import 'src/config/firebase';
import 'src/config/sentry';

import { ReactQueryClientProvider } from 'src/config/react-query';

import App from './App';
import ThemeWrapper from './components/ThemeWrapper';
import { PostHogConfigProvider } from './config/posthog';
import { ZendeskProvider } from './config/zendesk';
import { FeatureFlagsProvider } from './contexts/FeatureFlagsContext';
import { AuthProvider } from './contexts/JWTContext';
import { SettingsProvider } from './contexts/SettingsContext';
import { TopModalProvider } from './contexts/TopModalContext';
import * as serviceWorker from './serviceWorker';

const DEFAULT_FONT = 'Roboto';

const sentryCreateBrowserRouter =
  wrapCreateBrowserRouterV6(createBrowserRouter);

const router = sentryCreateBrowserRouter(
  createRoutesFromElements(
    <Route
      path="*"
      element={<App />}
    />,
  ),
);

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
  <StrictMode>
    <HelmetProvider>
      <StyledEngineProvider injectFirst>
        <SettingsProvider>
          <ThemeWrapper>
            <ReactQueryClientProvider>
              <AuthProvider>
                <FeatureFlagsProvider>
                  <ZendeskProvider>
                    <PostHogConfigProvider>
                      <TopModalProvider>
                        <SnackbarProvider
                          dense
                          maxSnack={3}
                          variant="success"
                          style={{ fontFamily: DEFAULT_FONT }}
                        >
                          <RouterProvider router={router} />
                        </SnackbarProvider>
                      </TopModalProvider>
                    </PostHogConfigProvider>
                  </ZendeskProvider>
                </FeatureFlagsProvider>
              </AuthProvider>
              <ReactQueryDevtools initialIsOpen={false} />
            </ReactQueryClientProvider>
          </ThemeWrapper>
        </SettingsProvider>
      </StyledEngineProvider>
    </HelmetProvider>
  </StrictMode>,
);

// If you want to enable client cache, register instead.
serviceWorker.unregister();