import type { BlockEditor } from "./editor.type.js";

export const headingEditor: BlockEditor = (container, raw, attrs, onCommit, onCancel, toolbar) => {
  let currentLevel = parseInt(attrs.level ?? "1", 10);

  const selector = document.createElement("div");
  selector.classList.add("heading-selector");
  for (let l = 1; l <= 6; l++) {
    const btn = document.createElement("button");
    btn.textContent = `H${l}`;
    if (l === currentLevel) btn.classList.add("active");
    btn.addEventListener("click", (e) => {
      e.stopPropagation();
      for (const b of selector.querySelectorAll("button")) {
        b.classList.remove("active");
      }
      btn.classList.add("active");
      currentLevel = l;
    });
    selector.appendChild(btn);
  }

  // Insert level selector into the popup toolbar (before Delete button)
  const deleteBtn = toolbar.querySelector(".danger");
  toolbar.insertBefore(selector, deleteBtn);

  const input = document.createElement("textarea");
  input.classList.add("edit-input");
  input.value = raw;
  input.addEventListener("keydown", (e) => {
    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      onCommit(input.value, { ...attrs, level: String(currentLevel) });
    }
    if (e.key === "Escape") {
      e.preventDefault();
      onCancel();
    }
  });

  container.innerHTML = "";
  container.appendChild(input);
  input.focus();
};