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 "./index.css";
import { LoadServerConfig } from "./widgets/LoadServerConfig";
import { ThemeProvider, createTheme } from "@mui/material";
import { LoadingMessageProvider } from "./hooks/providers/LoadingMessageProvider";
import { AlertDialogProvider } from "./hooks/providers/AlertDialogProvider";
import { SnackbarProvider } from "./hooks/providers/SnackbarProvider";
import { ConfirmDialogProvider } from "./hooks/providers/ConfirmDialogProvider";

const darkTheme = createTheme({
  palette: {
    mode: "dark",
  },
});

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <ConfirmDialogProvider>
        <AlertDialogProvider>
          <SnackbarProvider>
            <LoadingMessageProvider>
              <LoadServerConfig>
                <App />
              </LoadServerConfig>
            </LoadingMessageProvider>
          </SnackbarProvider>
        </AlertDialogProvider>
      </ConfirmDialogProvider>
    </ThemeProvider>
  </React.StrictMode>
);