import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

import { CssBaseline } from "@mui/material";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ServerApi } from "./api/ServerApi";
import { App } from "./App";
import { AlertDialogProvider } from "./hooks/contexts_provider/AlertDialogProvider";
import { ConfirmDialogProvider } from "./hooks/contexts_provider/ConfirmDialogProvider";
import { LoadingMessageProvider } from "./hooks/contexts_provider/LoadingMessageProvider";
import { SnackbarProvider } from "./hooks/contexts_provider/SnackbarProvider";
import "./index.css";
import { AppTheme } from "./theme/AppTheme";
import { AsyncWidget } from "./widgets/AsyncWidget";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en">
      <AppTheme>
        <CssBaseline enableColorScheme />
        <AlertDialogProvider>
          <ConfirmDialogProvider>
            <SnackbarProvider>
              <LoadingMessageProvider>
                <AsyncWidget
                  loadKey={1}
                  load={async () => {
                    await ServerApi.LoadConfig();
                  }}
                  errMsg="Failed to load static server configuration!"
                  build={() => <App />}
                />
              </LoadingMessageProvider>
            </SnackbarProvider>
          </ConfirmDialogProvider>
        </AlertDialogProvider>
      </AppTheme>
    </LocalizationProvider>
  </StrictMode>
);