import { PrismTheme } from "prism-react-renderer";
import createTheme from "@uiw/codemirror-themes";
import { tags as t } from "@lezer/highlight";

const commentColor = "#B8B8B8";
const generalColor = "#31353A";
const selectionColor = "#BBE1FF";

const htmlTagColor = "#01762E";
const htmlAttributeNameColor = "#6F37BE";
const htmlAttributeValueColor = "#0E3565";

const jsClassNameColor = "purple";
const jsKeywordColor = "#C70000";
const jsFnColor = "#1F69C7";
const jsOperatorColor = "#CE4A00";

const cssSelectorColor = "orange";
const cssPropertyColor = "#6F37BE";
const cssUnitColor = "#1F69C7";
const cssImportantColor = "#C7000A";

export const alison: PrismTheme = {
  styles: [
    {
      types: ["comment"],
      style: {
        color: commentColor,
      },
    },
    {
      types: ["builtin", "changed", "keyword"],
      style: {
        color: jsKeywordColor,
      },
    },
    {
      types: ["punctuation", "operator"],
      style: {
        color: jsOperatorColor,
      },
    },
    {
      types: ["number", "string", "inserted"],
      style: {
        color: jsFnColor,
      },
    },
    {
      types: ["class-name"],
      style: {
        color: jsClassNameColor,
      },
    },
    // {
    //   types: ["constant"],
    //   style: {
    //     color: "#1F69C7"
    //   }
    // },
    {
      types: ["attr-name", "variable"],
      style: {
        color: htmlAttributeNameColor,
      },
    },
    {
      types: ["tag", "doctype"],
      languages: ["markup"],
      style: {
        color: htmlTagColor,
      },
    },
    {
      types: ["attr-value"],
      style: {
        color: htmlAttributeValueColor,
      },
    },
    {
      types: ["punctuation"],
      languages: ["markup"],
      style: {
        color: "#31353A",
      },
    },
    {
      types: ["deleted"],
      style: {
        color: "#0E3565",
      },
    },
    {
      types: ["selector"],
      style: {
        color: cssSelectorColor,
      },
    },
    {
      types: ["unit"],
      style: {
        color: cssUnitColor,
      },
    },
    {
      types: ["property"],
      style: {
        color: cssPropertyColor,
      },
    },
    {
      types: ["important"],
      style: {
        color: cssImportantColor,
      },
    },
  ],
  plain: {
    color: undefined,
    cursor: undefined,
    background: undefined,
    backgroundImage: undefined,
    backgroundColor: undefined,
    textShadow: undefined,
    fontStyle: undefined,
    fontWeight: undefined,
    textDecorationLine: undefined,
    opacity: undefined,
  },
};

export const alisonCodemirror = createTheme({
  theme: "light",
  settings: {
    background: "transparent",
    foreground: generalColor,
    caret: htmlAttributeNameColor,
    selection: selectionColor,
    selectionMatch: selectionColor,
    gutterActiveForeground: generalColor,
    lineHighlight: "#8a91991a",
    gutterBackground: "#FFF",
    fontFamily: "'IBM Plex Mono', monospace",
    gutterForeground: commentColor,
    gutterBorder: "transparent",
  },
  styles: [
    { tag: t.comment, color: commentColor },
    { tag: t.variableName, color: jsFnColor },
    { tag: [t.string, t.special(t.brace)], color: generalColor },
    { tag: t.number, color: htmlAttributeNameColor },
    { tag: t.bool, color: htmlAttributeNameColor },
    { tag: t.null, color: htmlAttributeNameColor },
    { tag: t.keyword, color: jsKeywordColor },
    { tag: t.operator, color: jsOperatorColor },
    { tag: t.className, color: generalColor },
    { tag: t.tagName, color: htmlTagColor },
    { tag: t.attributeName, color: htmlAttributeNameColor },
    { tag: t.unit, color: cssUnitColor },
    { tag: t.propertyName, color: htmlAttributeNameColor },
  ],
});
