document.addEventListener("DOMContentLoaded", () => {
  const transitionDuration = 300;

  const closeModal = (modal) => {
    if (!modal) return;

    modal.classList.remove("is-active");

    setTimeout(() => {
      if (!modal.classList.contains("is-active")) {
        modal.style.display = "none";
      }
    }, transitionDuration);

    const otherActiveModal = [
      ...document.querySelectorAll("[data-modal-name].is-active"),
    ].some((item) => item !== modal);

    if (!otherActiveModal) {
      document.body.style.overflow = "";
    }
  };

  const closeAllModals = () => {
    document.querySelectorAll("[data-modal-name]").forEach((modal) => {
      modal.classList.remove("is-active");

      setTimeout(() => {
        if (!modal.classList.contains("is-active")) {
          modal.style.display = "none";
        }
      }, transitionDuration);
    });

    document.body.style.overflow = "";
  };

  document.addEventListener("click", (event) => {
    const openButton = event.target.closest("[data-open-modal-name]");

    if (openButton) {
      const modalName = openButton.dataset.openModalName;
      if (!modalName) return;

      event.preventDefault();

      const targetModal = [
        ...document.querySelectorAll("[data-modal-name]"),
      ].find((modal) => modal.dataset.modalName === modalName);

      if (!targetModal) return;

      document.querySelectorAll("[data-modal-name]").forEach((modal) => {
        if (modal !== targetModal) closeModal(modal);
      });

      targetModal.style.display = "flex";
      targetModal.offsetHeight;
      document.body.style.overflow = "hidden";

      setTimeout(() => {
        targetModal.classList.add("is-active");
      }, 50);

      return;
    }

    const closeButton = event.target.closest("[data-modal-close]");

    if (closeButton) {
      event.preventDefault();
      closeModal(closeButton.closest("[data-modal-name]"));
      return;
    }

    if (event.target.matches("[data-modal-name]")) {
      closeModal(event.target);
    }
  });

  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") closeAllModals();
  });
});