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

export const SUPPORTED_THEMES = ["vitesse-dark", "vitesse-light"];

export const DEFAULT_THEME = SUPPORTED_THEMES[0];

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

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

  shikiToMonaco(highlighter, monaco);
};