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

const markdownSourceHighlightStyle = HighlightStyle.define([
    {
        tag: [tags.link, tags.url],
        color: "#7dd3fc",
        textDecoration: "underline",
        textUnderlineOffset: "2px",
    },
    {
        tag: tags.heading,
        color: "#bfdbfe",
        fontWeight: "700",
    },
    {
        tag: tags.emphasis,
        color: "#facc15",
    },
    {
        tag: tags.strong,
        color: "#f8fafc",
        fontWeight: "700",
    },
]);

export const sourceEditorTheme = EditorView.theme(
    {
        "&": {
            color: "#dce7f5",
            backgroundColor: "transparent",
            height: "100%",
        },
        ".cm-content": {
            minHeight: "100%",
            padding: "18px 0",
            caretColor: "#facc15",
        },
        ".cm-line": {
            padding: "0 18px",
        },
        ".cm-cursor": {
            borderLeftColor: "#facc15",
            borderLeftWidth: "3px",
            boxShadow: "0 0 0 1px rgba(250, 204, 21, 0.14), 0 0 10px rgba(250, 204, 21, 0.44)",
        },
        ".cm-selectionBackground, &.cm-focused .cm-selectionBackground": {
            backgroundColor: "rgba(125, 211, 252, 0.22)",
        },
        ".cm-activeLine": {
            backgroundColor: "rgba(250, 204, 21, 0.08)",
        },
        ".cm-activeLineGutter": {
            backgroundColor: "rgba(250, 204, 21, 0.1)",
            color: "#fde68a",
        },
        ".cm-gutters": {
            color: "#95a3b8",
            backgroundColor: "rgba(16, 24, 39, 0.82)",
            borderRightColor: "rgba(148, 163, 184, 0.2)",
        },
        ".cm-scroller": {
            fontFamily: '"JetBrains Mono", "Cascadia Code", Consolas, monospace',
            fontSize: "13px",
            lineHeight: "1.65",
        },
        "&.cm-focused": {
            outline: "none",
        },
    },
    { dark: true },
);

export const sourceMarkdownHighlightExtensions = [
    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
    syntaxHighlighting(markdownSourceHighlightStyle),
];

export const codeBlockTheme = EditorView.theme(
    {
        "&": {
            backgroundColor: "#101827",
            color: "#dce7f5",
        },
        ".cm-scroller": {
            fontFamily: '"JetBrains Mono", "Cascadia Code", Consolas, monospace',
        },
        ".cm-content": {
            caretColor: "#facc15",
        },
        ".cm-cursor": {
            borderLeftColor: "#facc15",
            borderLeftWidth: "3px",
            boxShadow: "0 0 0 1px rgba(250, 204, 21, 0.14), 0 0 10px rgba(250, 204, 21, 0.44)",
        },
        ".cm-gutters": {
            backgroundColor: "#0b1220",
            color: "#95a3b8",
            borderRightColor: "rgba(148, 163, 184, 0.2)",
        },
        ".cm-activeLine": {
            backgroundColor: "rgba(250, 204, 21, 0.08)",
        },
        ".cm-selectionBackground, &.cm-focused .cm-selectionBackground": {
            backgroundColor: "rgba(125, 211, 252, 0.22)",
        },
    },
    { dark: true },
);