import { DomList } from "./dom-list.js";
import { addEventToElement, setText } from "./dom-utils.js";
import { emitEvent, listenTo } from "./events.js";
import { registerLoadCallback } from "./main.js";

registerLoadCallback(() => {
  listenTo("fileLoad:chooseDesign", designChoiceDialog);
})

function designChoiceDialog(e) {
  const dialog = document.querySelector('[data-dialog="fileLoad:chooseDesign"]');

  const dismiss = (data) => {
    dialog.classList.add("hidden");
    emitEvent("fileLoad:chooseDesign:choice", data);
  }

  addEventToElement(
      "dialog-action", "cancel", "click",
      () => dismiss(-1),
      { element: dialog },
  );
  dialog.addEventListener("click", e => {
    if (e.target !== e.currentTarget) return;
    dismiss(-1);
  });

  const list = new DomList(dialog.querySelector(":scope > section > main"));
  list.clear();

  for (const designIndex in e.detail.designs) {
    const design = e.detail.designs[designIndex];
    const button = list.makeItem();
    setText("Name", design.modules["plannerator:metadata"].Name, { element: button });
    setText("Author", design.modules["plannerator:metadata"].Author, { element: button });
    button.addEventListener("click", () => dismiss(designIndex));
    list.addItem(button);
  }

  dialog.classList.remove("hidden");
}