import { Editor } from "editor/editor";
import { EditorNode } from "editor/types";
import { markNames, setAuxiliaryToolbar, clearSelected } from "editor/utils";

function select(editor: Editor, el: HTMLAnchorElement): void {
  clearSelected(editor);
  el.dataset.editorSelected = "";
  editor.toolbar.auxiliary.link.urlEl.value = el.href;
  setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.link.parentEl);
}

export const link: EditorNode = {
  selector: "a",
  allowedChildren: [...markNames.filter((n) => n !== "link"), "text"],
  handleEmpty: "remove",
  create: () => document.createElement("a"),
  onClick(editor, el) {
    if (!(el instanceof HTMLAnchorElement)) throw new Error("oh no");
    select(editor, el);
  },
};

export function setupAuxiliaryToolbar(editor: Editor): void {
  editor.toolbar.auxiliary.link.urlEl.addEventListener("input", (event) => {
    const url = editor.toolbar.auxiliary.link.urlEl.value;
    const selectedEl = editor.contentEl.querySelector<HTMLAnchorElement>(
      "a[data-editor-selected]"
    );
    if (!selectedEl)
      throw new Error("No pude encontrar el link para setear el enlace");

    selectedEl.href = url;
  });
  editor.toolbar.auxiliary.link.urlEl.addEventListener("keydown", (event) => {
    if (event.keyCode == 13) event.preventDefault();
  });
}