import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import React from "react";
import ReactDOM from "react-dom/client";
import { App } from "./App";
import { AlertDialogProvider } from "./hooks/context_providers/AlertDialogProvider";
import { ConfirmDialogProvider } from "./hooks/context_providers/ConfirmDialogProvider";
import { DarkThemeProvider } from "./hooks/context_providers/DarkThemeProvider";
import { LoadingMessageProvider } from "./hooks/context_providers/LoadingMessageProvider";
import { SnackbarProvider } from "./hooks/context_providers/SnackbarProvider";
import "./index.css";
import { ServerApi } from "./api/ServerApi";
import { AsyncWidget } from "./widgets/AsyncWidget";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DarkThemeProvider>
        <AlertDialogProvider>
          <ConfirmDialogProvider>
            <SnackbarProvider>
              <LoadingMessageProvider>
                <AsyncWidget
                  loadKey={1}
                  load={async () => await ServerApi.LoadConfig()}
                  errMsg="Failed to connect to backend to retrieve static config!"
                  build={() => <App />}
                />
              </LoadingMessageProvider>
            </SnackbarProvider>
          </ConfirmDialogProvider>
        </AlertDialogProvider>
      </DarkThemeProvider>
    </LocalizationProvider>
  </React.StrictMode>
);