import {EditorView} from '@codemirror/view'
import {Extension} from '@codemirror/state'
import {HighlightStyle, syntaxHighlighting} from '@codemirror/language'
import {tags as t} from '@lezer/highlight'

export const config = {
    name: 'aura',
    dark: true,
    background: '#21202e',
    foreground: '#edecee',
    selection: '#A198EC7F',
    cursor: '#a277ff',
    dropdownBackground: '#21202e',
    dropdownBorder: '#3b334b',
    activeLine: '#4d4b6622',
    lineNumber: '#a394f033',
    lineNumberActive: '#cdccce',
    matchingBracket: '#a394f033',
    keyword: '#a277ff',
    storage: '#a277ff',
    variable: '#edecee',
    parameter: '#edecee',
    function: '#ffca85',
    string: '#61ffca',
    constant: '#61ffca',
    type: '#82e2ff',
    class: '#82e2ff',
    number: '#61ffca',
    comment: '#6d6d6d',
    heading: '#a277ff',
    invalid: '#ff6767',
    regexp: '#61ffca',
}

export const auraTheme = EditorView.theme({
    '&': {
        color: config.foreground,
        backgroundColor: config.background,
    },

    '.cm-content': {caretColor: config.cursor},

    '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor},
    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection},

    '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground},
    '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
    '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'},

    '.cm-searchMatch': {
        backgroundColor: config.dropdownBackground,
        outline: `1px solid ${config.dropdownBorder}`
    },
    '.cm-searchMatch.cm-searchMatch-selected': {
        backgroundColor: config.selection
    },

    '.cm-activeLine': {backgroundColor: config.activeLine},
    '.cm-selectionMatch': {backgroundColor: config.selection},

    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
        backgroundColor: config.matchingBracket,
        outline: 'none'
    },

    '.cm-gutters': {
        backgroundColor: config.background,
        color: config.foreground,
        border: 'none'
    },
    '.cm-activeLineGutter': {backgroundColor: config.background},

    '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber},
    '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive},

    '.cm-foldPlaceholder': {
        backgroundColor: 'transparent',
        border: 'none',
        color: config.foreground
    },
    '.cm-tooltip': {
        border: `1px solid ${config.dropdownBorder}`,
        backgroundColor: config.dropdownBackground,
        color: config.foreground,
    },
    '.cm-tooltip .cm-tooltip-arrow:before': {
        borderTopColor: 'transparent',
        borderBottomColor: 'transparent'
    },
    '.cm-tooltip .cm-tooltip-arrow:after': {
        borderTopColor: config.foreground,
        borderBottomColor: config.foreground,
    },
    '.cm-tooltip-autocomplete': {
        '& > ul > li[aria-selected]': {
            background: config.selection,
            color: config.foreground,
        }
    }
}, {dark: config.dark})

export const auraHighlightStyle = HighlightStyle.define([
    {tag: t.keyword, color: config.keyword},
    {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable},
    {tag: [t.propertyName], color: config.function},
    {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string},
    {tag: [t.function(t.variableName), t.labelName], color: config.function},
    {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant},
    {tag: [t.definition(t.name), t.separator], color: config.variable},
    {tag: [t.className], color: config.class},
    {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number},
    {tag: [t.typeName], color: config.type, fontStyle: config.type},
    {tag: [t.operator, t.operatorKeyword], color: config.keyword},
    {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp},
    {tag: [t.meta, t.comment], color: config.comment},
    {tag: t.strong, fontWeight: 'bold'},
    {tag: t.emphasis, fontStyle: 'italic'},
    {tag: t.link, textDecoration: 'underline'},
    {tag: t.heading, fontWeight: 'bold', color: config.heading},
    {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable},
    {tag: t.invalid, color: config.invalid},
    {tag: t.strikethrough, textDecoration: 'line-through'},
])

export const aura: Extension = [
    auraTheme,
    syntaxHighlighting(auraHighlightStyle),
]