/*** IMPORT ------------------------------------------- ***/

import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { EditorView } from "@codemirror/view";
import { tags as t } from "@lezer/highlight";

/*** EXPORT ------------------------------------------- ***/

const BG = "#fafafa";
const BORDER = "#e0e0e0";
const FG = "#24292e";
const GUTTER_BG = "#f3f3f3";
const GUTTER_FG = "#9ca3af";
const SELECTION = "#b3d4fc";

const base = EditorView.theme({
  "&": {
    backgroundColor: BG,
    color: FG
  },
  "&.cm-focused": {
    outline: "none"
  },
  ".cm-activeLine": {
    backgroundColor: "#f0f0f0"
  },
  ".cm-activeLineGutter": {
    backgroundColor: "transparent",
    color: FG
  },
  ".cm-content": {
    caretColor: "#1f6feb"
  },
  ".cm-cursor, .cm-dropCursor": {
    borderLeftColor: "#1f6feb"
  },
  ".cm-gutters": {
    backgroundColor: GUTTER_BG,
    border: "none",
    borderRight: `1px solid ${BORDER}`,
    color: GUTTER_FG
  },
  ".cm-matchingBracket": {
    backgroundColor: "#dbeafe",
    outline: "1px solid #93c5fd"
  },
  ".cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
    backgroundColor: SELECTION
  }
}, { dark: false });

const highlight = HighlightStyle.define([
  { color: "#d73a49", tag: t.keyword },
  { color: "#6f42c1", tag: [t.name, t.deleted, t.character, t.macroName] },
  { color: "#6f42c1", tag: [t.propertyName] },
  { color: "#032f62", tag: [t.string, t.special(t.string)] },
  { color: "#005cc5", tag: [t.number, t.bool, t.null, t.atom] },
  { color: "#6a737d", fontStyle: "italic", tag: t.comment },
  { color: "#22863a", tag: [t.typeName, t.className] },
  { color: "#e36209", tag: [t.variableName, t.labelName] },
  { color: "#d73a49", tag: [t.operator, t.operatorKeyword] },
  { color: "#6a737d", tag: [t.meta, t.documentMeta] },
  { color: "#22863a", tag: [t.tagName] },
  { color: "#6f42c1", tag: [t.attributeName] },
  { color: "#e36209", tag: [t.heading] },
  { color: "#032f62", tag: [t.link] },
  { fontWeight: "bold", tag: [t.strong] },
  { fontStyle: "italic", tag: [t.emphasis] },
  { tag: t.strikethrough, textDecoration: "line-through" }
]);

export const lightTheme = [base, syntaxHighlighting(highlight)];