import {EditorView, keymap, lineNumbers} from "@codemirror/view"
import {EditorState, Compartment} from "@codemirror/state"
import {minimalSetup} from "codemirror"
import {html} from "@codemirror/lang-html"
import {javascript} from "@codemirror/lang-javascript"
import {bracketMatching, syntaxHighlighting} from "@codemirror/language"
import {classHighlighter} from "@lezer/highlight"

let modeCompartment = new Compartment

export function createState(code, mode, extensions = []) {
  return EditorState.create({
    doc: code,
    extensions: [
      extensions,
      modeCompartment.of(mode == "html" ? html() : javascript()),
      minimalSetup,
      syntaxHighlighting(classHighlighter),
      bracketMatching(),
      lineNumbers(),
      EditorView.contentAttributes.of({"aria-label": "Code editor"})
    ]
  })
}

export function updateLanguage(mode) {
  return modeCompartment.reconfigure(mode == "html" ? html() : javascript())
}