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

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

import 'nprogress/nprogress.css';
import 'react-perfect-scrollbar/dist/css/styles.css';
import 'src/config/sentry';

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

import { SnackbarProvider } from '@material-hu/components/design-system/Snackbar';

import App from 'src/App';
import { ReactQueryClientProvider } from 'src/config/react-query';
import { FeatureFlagsProvider } from 'src/contexts/FeatureFlagsContext';
import { AuthProvider } from 'src/contexts/JWTContext';
import { PageVisibilityProvider } from 'src/contexts/PageVisibilityContext';
import { ScrollPositionProvider as FeedScrollPositionProvider } from 'src/contexts/ScrollPosition';
import { SettingsProvider } from 'src/contexts/SettingsContext';
import reportWebVitals from 'src/reportWebVitals';

import SplashScreen from 'src/components/SplashScreen';
import ThemeWrapper from 'src/components/ThemeWrapper';

const sentryCreateBrowserRouter =
  wrapCreateBrowserRouterV6(createBrowserRouter);

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

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
  <StrictMode>
    <StyledEngineProvider injectFirst>
      <SettingsProvider>
        <ThemeWrapper>
          <Suspense fallback={<SplashScreen />}>
            <ReactQueryClientProvider>
              <AuthProvider>
                <HelmetProvider>
                  <SnackbarProvider
                    dense
                    maxSnack={3}
                    variant="success"
                  >
                    <FeatureFlagsProvider>
                      <PageVisibilityProvider>
                        <FeedScrollPositionProvider>
                          <RouterProvider router={router} />
                        </FeedScrollPositionProvider>
                      </PageVisibilityProvider>
                    </FeatureFlagsProvider>
                    <ReactQueryDevtools initialIsOpen={false} />
                  </SnackbarProvider>
                </HelmetProvider>
              </AuthProvider>
            </ReactQueryClientProvider>
          </Suspense>
        </ThemeWrapper>
      </SettingsProvider>
    </StyledEngineProvider>
  </StrictMode>,
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();