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

/** Editing UI for image blocks — src / alt / title inputs. */
export const imageEditor: BlockEditor = (container, raw, attrs, onCommit, onCancel) => {
  const srcInput = document.createElement("input");
  srcInput.type = "text";
  srcInput.classList.add("edit-input");
  srcInput.placeholder = "Image URL";
  srcInput.value = attrs.src ?? "";

  const altInput = document.createElement("input");
  altInput.type = "text";
  altInput.classList.add("edit-input");
  altInput.placeholder = "Alt text";
  altInput.value = raw;

  const titleInput = document.createElement("input");
  titleInput.type = "text";
  titleInput.classList.add("edit-input");
  titleInput.placeholder = "Title (optional)";
  titleInput.value = attrs.title ?? "";

  const commit = () => {
    const src = srcInput.value.trim();
    if (!src) return onCancel();
    const newAttrs: Record<string, string> = { src };
    const title = titleInput.value.trim();
    if (title) newAttrs.title = title;
    onCommit(altInput.value, newAttrs);
  };

  const onKey = (e: KeyboardEvent) => {
    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      commit();
    }
    if (e.key === "Escape") {
      e.preventDefault();
      onCancel();
    }
  };

  srcInput.addEventListener("keydown", onKey);
  altInput.addEventListener("keydown", onKey);
  titleInput.addEventListener("keydown", onKey);

  container.innerHTML = "";
  container.appendChild(srcInput);
  container.appendChild(altInput);
  container.appendChild(titleInput);
  srcInput.focus();
};