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

import { ThemeProvider, createTheme } from "@mui/material";
import React from "react";
import ReactDOM from "react-dom/client";
import { App } from "./App";
import { AlertDialogProvider } from "./hooks/providers/AlertDialogProvider";
import { ConfirmDialogProvider } from "./hooks/providers/ConfirmDialogProvider";
import { LoadingMessageProvider } from "./hooks/providers/LoadingMessageProvider";
import { SnackbarProvider } from "./hooks/providers/SnackbarProvider";
import "./index.css";
import { LoadServerConfig } from "./widgets/LoadServerConfig";

import { loader } from "@monaco-editor/react";
import * as monaco from "monaco-editor";
import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import { configureMonacoYaml } from "monaco-yaml";
import YamlWorker from "monaco-yaml/yaml.worker?worker";

// This allows to use a self hosted instance of Monaco editor
loader.config({ monaco });

// Add YAML support to Monaco
configureMonacoYaml(monaco, {
  enableSchemaRequest: false,
});

/// YAML worker
window.MonacoEnvironment = {
  getWorker(_moduleId, label) {
    switch (label) {
      case "editorWorkerService":
        return new EditorWorker();
      case "yaml":
        return new YamlWorker();
      default:
        throw new Error(`Unknown label ${label}`);
    }
  },
};

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

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