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: "andromeeda",
    value: "andromeeda",
    label: "Andromeeda",
  },
  {
    key: "aurora-x",
    value: "aurora-x",
    label: "Aurora X",
  },
  {
    key: "ayu-dark",
    value: "ayu-dark",
    label: "Ayu Dark",
  },
  {
    key: "catppuccin-frappe",
    value: "catppuccin-frappe",
    label: "Catppuccin Frappé",
  },
  {
    key: "catppuccin-latte",
    value: "catppuccin-latte",
    label: "Catppuccin Latte",
  },
  {
    key: "catppuccin-macchiato",
    value: "catppuccin-macchiato",
    label: "Catppuccin Macchiato",
  },
  {
    key: "catppuccin-mocha",
    value: "catppuccin-mocha",
    label: "Catppuccin Mocha",
  },
  {
    key: "dark-plus",
    value: "dark-plus",
    label: "Dark Plus",
  },
  {
    key: "dracula",
    value: "dracula",
    label: "Dracula",
  },
  {
    key: "dracula-soft",
    value: "dracula-soft",
    label: "Dracula Soft",
  },
  {
    key: "everforest-dark",
    value: "everforest-dark",
    label: "Everforest Dark",
  },
  {
    key: "everforest-light",
    value: "everforest-light",
    label: "Everforest Light",
  },
  {
    key: "github-dark",
    value: "github-dark",
    label: "GitHub Dark",
  },
  // {
  //   key: "github-dark-default",
  //   value: "github-dark-default",
  //   label: "GitHub Dark Default",
  // },
  // {
  //   key: "github-dark-dimmed",
  //   value: "github-dark-dimmed",
  //   label: "GitHub Dark Dimmed",
  // },
  // {
  //   key: "github-dark-high-contrast",
  //   value: "github-dark-high-contrast",
  //   label: "GitHub Dark High Contrast",
  // },
  {
    key: "github-light",
    value: "github-light",
    label: "GitHub Light",
  },
  {
    key: "github-light-default",
    value: "github-light-default",
    label: "GitHub Light Default",
  },
  {
    key: "github-light-high-contrast",
    value: "github-light-high-contrast",
    label: "GitHub Light High Contrast",
  },
  {
    key: "houston",
    value: "houston",
    label: "Houston",
  },
  {
    key: "kanagawa-dragon",
    value: "kanagawa-dragon",
    label: "Kanagawa Dragon",
  },
  {
    key: "kanagawa-lotus",
    value: "kanagawa-lotus",
    label: "Kanagawa Lotus",
  },
  {
    key: "kanagawa-wave",
    value: "kanagawa-wave",
    label: "Kanagawa Wave",
  },
  {
    key: "laserwave",
    value: "laserwave",
    label: "Laserwave",
  },
  {
    key: "light-plus",
    value: "light-plus",
    label: "Light Plus",
  },
  {
    key: "material-theme",
    value: "material-theme",
    label: "Material Theme",
  },
  {
    key: "material-theme-darker",
    value: "material-theme-darker",
    label: "Material Theme Darker",
  },
  {
    key: "material-theme-lighter",
    value: "material-theme-lighter",
    label: "Material Theme Lighter",
  },
  {
    key: "material-theme-ocean",
    value: "material-theme-ocean",
    label: "Material Theme Ocean",
  },
  {
    key: "material-theme-palenight",
    value: "material-theme-palenight",
    label: "Material Theme Palenight",
  },
  {
    key: "min-dark",
    value: "min-dark",
    label: "Min Dark",
  },
  {
    key: "min-light",
    value: "min-light",
    label: "Min Light",
  },
  {
    key: "monokai",
    value: "monokai",
    label: "Monokai",
  },
  {
    key: "night-owl",
    value: "night-owl",
    label: "Night Owl",
  },
  {
    key: "nord",
    value: "nord",
    label: "Nord",
  },
  {
    key: "one-dark-pro",
    value: "one-dark-pro",
    label: "One Dark Pro",
  },
  {
    key: "one-light",
    value: "one-light",
    label: "One Light",
  },
  {
    key: "plastic",
    value: "plastic",
    label: "Plastic",
  },
  {
    key: "poimandres",
    value: "poimandres",
    label: "Poimandres",
  },
  {
    key: "red",
    value: "red",
    label: "Red",
  },
  {
    key: "rose-pine",
    value: "rose-pine",
    label: "Rosé Pine",
  },
  {
    key: "rose-pine-dawn",
    value: "rose-pine-dawn",
    label: "Rosé Pine Dawn",
  },
  {
    key: "rose-pine-moon",
    value: "rose-pine-moon",
    label: "Rosé Pine Moon",
  },
  {
    key: "slack-dark",
    value: "slack-dark",
    label: "Slack Dark",
  },
  {
    key: "slack-ochin",
    value: "slack-ochin",
    label: "Slack Ochin",
  },
  {
    key: "snazzy-light",
    value: "snazzy-light",
    label: "Snazzy Light",
  },
  {
    key: "solarized-dark",
    value: "solarized-dark",
    label: "Solarized Dark",
  },
  {
    key: "solarized-light",
    value: "solarized-light",
    label: "Solarized Light",
  },
  {
    key: "synthwave-84",
    value: "synthwave-84",
    label: "Synthwave '84",
  },
  {
    key: "tokyo-night",
    value: "tokyo-night",
    label: "Tokyo Night",
  },
  // {
  //   key: "vesper",
  //   value: "vesper",
  //   label: "Vesper",
  // },
  {
    key: "vitesse-black",
    value: "vitesse-black",
    label: "Vitesse Black",
  },
  {
    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.value),
    langs: SUPPORTED_LANGUAGES.map((lang) => lang.value),
  });

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

  shikiToMonaco(highlighter, monaco);
};