import { loader } from '@monaco-editor/react';
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

type MonacoWorkerConstructor = new () => Worker;

const workerByLabel: Record<string, MonacoWorkerConstructor> = {
  css: cssWorker,
  handlebars: htmlWorker,
  html: htmlWorker,
  javascript: tsWorker,
  json: jsonWorker,
  less: cssWorker,
  razor: htmlWorker,
  scss: cssWorker,
  typescript: tsWorker,
};

const monacoGlobal = globalThis as typeof globalThis & {
  MonacoEnvironment?: {
    getWorker: (_moduleId: string, label: string) => Worker;
  };
};

monacoGlobal.MonacoEnvironment = {
  getWorker(_moduleId: string, label: string) {
    const WorkerConstructor = workerByLabel[label] ?? editorWorker;
    return new WorkerConstructor();
  },
};

loader.config({ monaco });
