import React, { Suspense, lazy } from 'react';
import ReactDOM from 'react-dom/client';
// Perfect Scrollbar
import 'react-perfect-scrollbar/dist/css/styles.css';
// Redux
import { Provider } from 'react-redux';
// Router
import { RouterProvider } from 'react-router-dom';

// i18n (needs to be bundled)
import '@core/i18n';
import router from '@core/router';
// Mantine UI
import { MantineProvider } from '@mantine/core';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';

import ProviderReactQuery from './core/provider/ProviderReactQuery';
import ErrorBoundary from './shared/components/ErrorBoundary';
import store from './store/index';
// Tailwind css
import './tailwind.css';

// Lazy load UploadProgressToast
const UploadProgressToast = lazy(() => import('./shared/components/UploadProgressToast'));

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
        <ErrorBoundary>
            <Suspense>
                <Provider store={store}>
                    <ProviderReactQuery>
                        <MantineProvider theme={{}}>
                            <RouterProvider router={router} />
                            <UploadProgressToast />
                        </MantineProvider>
                    </ProviderReactQuery>
                </Provider>
            </Suspense>
        </ErrorBoundary>
    </React.StrictMode>,
);