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

import { color, yang } from "@inc/uchu";
import { Decoration, drawSelection, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { tags as t } from "@lezer/highlight";

/*** UTILITY ------------------------------------------ ***/

const BG = yang;
const BORDER = color("gray", 1);
const FG = color("yin", 3);
const GUTTER_BG = color("gray", 1);
const GUTTER_FG = color("gray", 6);
const SELECTION = color("yellow", 1);

const base = EditorView.theme({
  "&": {
    backgroundColor: BG,
    color: FG
  },
  "&.cm-focused": {
    outline: "none"
  },
  "&.cm-focused .cm-matchingBracket": {
    backgroundColor: color("gray", 1)
  },
  "&.cm-focused .cm-selectionBackground, ::selection": {
    backgroundColor: SELECTION
  },
  ".cm-activeLine": {
    backgroundColor: color("gray", 1)
  },
  ".cm-activeLineGutter": {
    backgroundColor: "transparent",
    color: FG
  },
  ".cm-content": {
    padding: 0
  },
  ".cm-gutters": {
    backgroundColor: GUTTER_BG,
    border: "none",
    borderRight: `1px solid ${BORDER}`,
    color: GUTTER_FG
  },
  ".cm-lineNumbers .cm-gutterElement": {
    padding: "0 5px 0 15px"
  },
  ".cm-lintPoint::after": {
    borderBottomColor: color("red", 5)
  },
  ".cm-matchingBracket": {
    backgroundColor: color("gray", 1),
    color: color("yin", 8),
    outline: "none"
  },
  ".cm-scroller": {
    fontSize: "0.8rem",
    lineHeight: 1.3
  },
  ".cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
    backgroundColor: SELECTION
  }
}, { dark: false });

const blockCaretTheme = EditorView.theme({
  "&": {
    caretColor: "transparent"
  },
  "& .cm-cursor": {
    borderLeftColor: color("blue", 5),
    borderLeftStyle: "solid",
    borderLeftWidth: "1ch",
    marginLeft: "0"
  },
  "& .cm-cursorLayer": {
    mixBlendMode: "hard-light",
    zIndex: "auto"
  },
  "& .cm-scroller": {
    isolation: "isolate"
  }
});

const highlight = HighlightStyle.define([
  {
    color: color("yin", 8),
    tag: [
      t.atom,
      t.attributeName,
      t.bool,
      t.character,
      t.className,
      t.comment,
      t.deleted,
      t.documentMeta,
      t.keyword,
      t.heading,
      t.labelName,
      t.link,
      t.macroName,
      t.meta,
      t.name,
      t.null,
      t.operator,
      t.operatorKeyword,
      t.propertyName,
      t.tagName,
      t.typeName,
      t.variableName
    ]
  },
  {
    backgroundColor: color("green", 1),
    color: color("green", 9),
    tag: [t.string, t.special(t.string)]
  },
  {
    color: color("purple", 4),
    tag: [t.number]
  },
  {
    fontStyle: "italic",
    tag: [t.comment, t.emphasis]
  },
  {
    fontWeight: "bold",
    tag: [t.strong]
  },
  {
    tag: t.strikethrough,
    textDecoration: "line-through"
  }
]);

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

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