import { createHighlighter } from "shiki";
import { Monaco } from "@monaco-editor/react";
import { shikiToMonaco } from "@shikijs/monaco";
import { SUPPORTED_LANGUAGES } from "./languages";

export const SUPPORTED_THEMES = [
  {
    key: "vitesse-dark",
    value: "vitesse-dark",
    label: "Vitesse Dark",
  },
  {
    key: "vitesse-light",
    value: "vitesse-light",
    label: "Vitesse Light",
  },
];

export const DEFAULT_THEME = SUPPORTED_THEMES[0].value;

export const highlightMonacoEditor = async (monaco: Monaco) => {
  const highlighter = await createHighlighter({
    themes: SUPPORTED_THEMES.map((theme) => theme.key),
    langs: SUPPORTED_LANGUAGES.map((lang) => lang.key),
  });

  for (const lang of SUPPORTED_LANGUAGES) {
    monaco.languages.register({ id: lang.key });
  }

  shikiToMonaco(highlighter, monaco);
};