// retoor <retoor@molodetz.nl>
import { Component } from "./Component.js";

export class Dialog extends Component {
  static tag = "dp-dialog";

  setup() {
    this.className = "modal-overlay";
    this.setAttribute("role", "alertdialog");
    this.setAttribute("aria-modal", "true");
  }

  confirm(message, { okLabel = "Ja", cancelLabel = "Annuleren" } = {}) {
    return new Promise((resolve) => {
      this.replaceChildren();
      const box = document.createElement("div");
      box.className = "modal";
      const text = document.createElement("p");
      text.textContent = message;
      const actions = document.createElement("div");
      actions.className = "actions";
      const ok = document.createElement("button");
      ok.type = "button";
      ok.className = "button";
      ok.textContent = okLabel;
      const cancel = document.createElement("button");
      cancel.type = "button";
      cancel.className = "button ghost";
      cancel.textContent = cancelLabel;
      actions.append(cancel, ok);
      box.append(text, actions);
      this.append(box);
      this.classList.add("visible");
      const finish = (value) => {
        this.classList.remove("visible");
        document.removeEventListener("keydown", onKey);
        resolve(value);
      };
      const onKey = (event) => {
        if (event.key === "Escape") {
          finish(false);
        }
      };
      document.addEventListener("keydown", onKey);
      ok.addEventListener("click", () => finish(true));
      cancel.addEventListener("click", () => finish(false));
      ok.focus();
    });
  }
}