import React from 'react'
import ReactDOM from 'react-dom/client'
import Router from './Router.tsx'
import '@mantine/core/styles.layer.css';
import '@mantine/code-highlight/styles.layer.css';
import '@mantine/dates/styles.layer.css';
import '@mantine/tiptap/styles.layer.css';
import '@mantine/notifications/styles.layer.css';
import {Alert, createTheme, DEFAULT_THEME, MantineProvider, mergeMantineTheme} from "@mantine/core";
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
import {PocketBaseProvider} from "@/lib/pocketbase.tsx";
import "./style/global.css";
import "./style/EventCalender.scss"

// fonts
import "@fontsource/overpass"
import "@fontsource/fira-code"
import {Notifications} from "@mantine/notifications";
import {ModalsProvider} from "@mantine/modals";

export const queryClient = new QueryClient()

const themeOverride = createTheme({
    fontFamilyMonospace: 'Fira Code VF, monospace',
    fontFamily: 'Overpass, sans-serif',
    headings: {
        fontFamily: 'Overpass, sans-serif'
    },
    components: {
        Alert: Alert.extend({
            defaultProps: {
                radius: 'md',
            }
        })
    }
});
export const theme = mergeMantineTheme(DEFAULT_THEME, themeOverride);

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <MantineProvider theme={theme}>
            <ModalsProvider>
                <Notifications/>
                <QueryClientProvider client={queryClient}>
                    <PocketBaseProvider>
                        <Router/>
                    </PocketBaseProvider>
                    {/*
                <ReactQueryDevtools initialIsOpen={false}/>
            */}
                </QueryClientProvider>
            </ModalsProvider>
        </MantineProvider>
    </React.StrictMode>
)