import React from "react";
import ReactDOM from "react-dom/client";
import { App } from "./App";
import { ServerApi } from "./api/ServerApi";
import "./index.css";
import reportWebVitals from "./reportWebVitals";

// Roboto font
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import { AlertDialogProvider } from "./hooks/context_providers/AlertDialogProvider";
import { ConfirmDialogProvider } from "./hooks/context_providers/ConfirmDialogProvider";
import { DarkThemeProvider } from "./hooks/context_providers/DarkThemeProvider";
import { SnackbarProvider } from "./hooks/context_providers/SnackbarProvider";
import { AsyncWidget } from "./widgets/AsyncWidget";

async function init() {
  try {
    const root = ReactDOM.createRoot(
      document.getElementById("root") as HTMLElement
    );

    root.render(
      <React.StrictMode>
        <DarkThemeProvider>
          <AlertDialogProvider>
            <ConfirmDialogProvider>
              <SnackbarProvider>
                <div style={{ height: "100vh" }}>
                  <AsyncWidget
                    loadKey={1}
                    load={async () => await ServerApi.LoadConfig()}
                    errMsg="Echec de la connexion au serveur pour la récupération de la configuration statique !"
                    build={() => <App />}
                  />
                </div>
              </SnackbarProvider>
            </ConfirmDialogProvider>
          </AlertDialogProvider>
        </DarkThemeProvider>
      </React.StrictMode>
    );
  } catch (e) {
    console.error(e);
    alert("Echec de l'initialisation de l'application !");
  }
}

init();

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();