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

  // CLOSE SINGLE MODAL
  const closeModal = (modal) => {
    if (!modal) return;

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

    setTimeout(() => {
      modal.style.display = "none";
    }, transitionDuration);

    const activeModals = document.querySelectorAll(
      "[data-modal-name].is-active",
    );

    if (activeModals.length <= 1) {
      document.body.style.overflow = "";
    }
  };

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

      setTimeout(() => {
        modal.style.display = "none";
      }, transitionDuration);
    });

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

  // OPEN MODAL
  document.querySelectorAll("[data-open-modal-name]").forEach((button) => {
    button.addEventListener("click", (event) => {
      const modalName = button.dataset.openModalName;

      if (!modalName) return;

      event.preventDefault();

      const targetModal = document.querySelector(
        `[data-modal-name="${modalName}"]`,
      );

      if (!targetModal) return;

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

          setTimeout(() => {
            modal.style.display = "none";
          }, transitionDuration);
        }
      });

      targetModal.style.display = "flex";

      targetModal.offsetHeight;

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

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

  // CLOSE BUTTON
  document.querySelectorAll("[data-modal-close]").forEach((button) => {
    button.addEventListener("click", (event) => {
      event.preventDefault();

      const modal = button.closest("[data-modal-name]");

      closeModal(modal);
    });
  });

  // CLOSE ON BACKDROP CLICK
  document.querySelectorAll("[data-modal-name]").forEach((modal) => {
    modal.addEventListener("click", (event) => {
      if (event.target === modal) {
        closeModal(modal);
      }
    });
  });

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