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

export class Lightbox extends Component {
  static tag = "dp-lightbox";

  setup() {
        this.setAttribute("role", "dialog");
    this.setAttribute("aria-modal", "true");
    this.setAttribute("aria-label", "Image");
    this.hidden = true;
    this.image = document.createElement("img");
    this.image.alt = "";
    this.caption = document.createElement("p");
    this.caption.className = "caption";
    this.closeButton = document.createElement("button");
    this.closeButton.type = "button";
    this.closeButton.className = "modal-close lightbox-close";
    this.closeButton.setAttribute("aria-label", "Close");
    this.closeButton.textContent = "\u00d7";
    this.append(this.closeButton, this.image, this.caption);
    this.items = [];
    this.index = 0;
    document.addEventListener("click", (event) => this.onDocumentClick(event));
    this.addEventListener("click", (event) => {
      if (event.target === this || event.target === this.closeButton) {
        this.close();
      }
    });
    document.addEventListener("keydown", (event) => this.onKey(event));
  }

  onDocumentClick(event) {
    const link = event.target.closest("[data-lightbox]");
    if (!link || event.metaKey || event.ctrlKey) {
      return;
    }
    event.preventDefault();
    this.items = [...document.querySelectorAll("[data-lightbox]")];
    this.show(this.items.indexOf(link));
  }

  show(index) {
    this.index = (index + this.items.length) % this.items.length;
    const link = this.items[this.index];
    this.image.src = link.getAttribute("href");
    this.image.alt = link.dataset.caption || "";
    this.caption.textContent = link.dataset.caption || "";
    this.hidden = false;
    this.classList.add("visible");
    this.closeButton.focus();
  }

  close() {
    this.hidden = true;
    this.classList.remove("visible");
    this.image.removeAttribute("src");
  }

  onKey(event) {
    if (this.hidden) {
      return;
    }
    if (event.key === "Escape") {
      this.close();
    } else if (event.key === "ArrowRight") {
      this.show(this.index + 1);
    } else if (event.key === "ArrowLeft") {
      this.show(this.index - 1);
    }
  }
}