class PreviewableImage extends HTMLElement {
  static elementName = "previewable-image";

  connectedCallback() {
    const img = this.querySelector("picture") ?? this.querySelector("img");
    if (!img) {
      console.warn("PreviewableImage: no valid child picture or img", this);
      return;
    }

    const dialog = document.createElement("dialog");
    dialog.appendChild(img.cloneNode(true));

    const closeForm = document.createElement("form");
    closeForm.method = "dialog";

    const closeButton = document.createElement("button");
    closeButton.innerText = this.getAttribute("close-label") || "Close";
    closeForm.appendChild(closeButton);

    dialog.appendChild(closeForm);

    const openButton = document.createElement("button");
    openButton.appendChild(img);
    openButton.addEventListener("click", () => {
      dialog.showModal();
    });

    this.appendChild(openButton);
    this.appendChild(dialog);

    if (this.hasAttribute("open")) {
      dialog.showModal();
    }
  }
}

customElements.define(PreviewableImage.elementName, PreviewableImage);