import { javascript } from "npm:@codemirror/lang-javascript";
import { css } from "npm:@codemirror/lang-css";
import { html } from "npm:@codemirror/lang-html";
import { EditorView, keymap } from "npm:@codemirror/view";
import { button } from "npm:@observablehq/inputs";
import { basicSetup } from "npm:@uiw/codemirror-extensions-basic-setup";
import { tokyoNight } from "npm:@uiw/codemirror-theme-tokyo-night";

export function Editor({
  value = "",
  style = "",
} = {}) {
  const parent = document.createElement("div");
  parent.style = style;
  parent.value = value;

  const run = () => {
    parent.value = String(editor.state.doc);
    parent.dispatchEvent(new InputEvent("input", { bubbles: true }));
  };

  const editor = new EditorView({
    parent,
    doc: value,
    extensions: [
      basicSetup({
        lineNumbers: false
      }),
      javascript(),
      css(),
      html(),
      tokyoNight,
      keymap.of([
        { key: "Mod-s", preventDefault: true, run },
      ]),
    ],
  });

  parent.addEventListener(
    "keyup",
    (event) => event.isTrusted && run(),
  );

  return parent;
}