import ReactDOM from 'react-dom/client'
import {RouterProvider, createRouter} from '@tanstack/react-router'
import {routeTree} from './routeTree.gen'
import {MantineProvider} from "@mantine/core";
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
import {Provider} from "react-redux";
import {store} from "./redux/store.ts";

import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css';
import '@mantine/dates/styles.css';
import 'mantine-react-table/styles.css';

import 'dayjs/locale/ru';

import './main.css';
import {Notifications} from "@mantine/notifications";
import {ModalsProvider} from "@mantine/modals";
import {OpenAPI} from "./client";
import {DatesProvider} from "@mantine/dates";
import {modals} from "./modals/modals.ts";
import TasksProvider from "./providers/TasksProvider/TasksProvider.tsx";

// Configuring router
const router = createRouter({routeTree})
declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router
    }
}

declare module '@mantine/modals' {
    export interface MantineModalsOverride {
        modals: typeof modals;
    }
}

// Configuring query
const queryClient = new QueryClient();

// Configuring OpenAPI
OpenAPI.BASE = import.meta.env.VITE_API_URL
OpenAPI.TOKEN = JSON.parse(localStorage.getItem('authState') || "{}")['accessToken'];
ReactDOM.createRoot(document.getElementById('root')!).render(
    <Provider store={store}>
        <QueryClientProvider client={queryClient}>
            <MantineProvider defaultColorScheme={"dark"}>
                <ModalsProvider modals={modals}>
                    <DatesProvider settings={{locale: 'ru'}}>
                        <TasksProvider>

                            <RouterProvider router={router}/>
                            <Notifications/>
                        </TasksProvider>

                    </DatesProvider>
                </ModalsProvider>
            </MantineProvider>
        </QueryClientProvider>
    </Provider>
)
