let visibleModal = null;
var escapeOk = true;

const toggleModalNoEscape = (event) => {
  toggleModal(event, true);
  escapeOk = false;
}

// Toggle modal
const toggleModal = (event, avoidPrevent=false) => {
  escapeOk = true;
  if (!avoidPrevent)
    event.preventDefault();
  const modal = document.getElementById(event.currentTarget.getAttribute("data-target"));
  typeof modal != "undefined" && modal != null && isModalOpen(modal)
    ? closeModal(modal)
    : openModal(modal);
};

// Is modal open
const isModalOpen = (modal) => {
  return modal.hasAttribute("open") && modal.getAttribute("open") != "false" ? true : false;
};

// Open modal
const openModal = (modal, back=true) => {
  if (isScrollbarVisible()) {
    document.documentElement.style.setProperty("--scrollbar-width", `${getScrollbarWidth()}px`);
  }
  modal.setAttribute("open", true);
  if (back) {
    window.history.pushState({ isPopup: true }, 'modal');
    window.location.hash = modal.querySelector('header a.close').getAttribute('href');
  }
  setTimeout(function() {
    visibleModal = modal;

    const mask = visibleModal.querySelector(".h-mask");
    if (mask != null)
      mask.classList.add("visible");
  }, 350);
};

const hideModal = (modal) => {
  if (modal != null) {
    const mask = visibleModal.querySelector(".h-mask");
    if (mask != null)
      mask.classList.remove("visible");
    visibleModal = null;
    document.documentElement.style.removeProperty("--scrollbar-width");
    modal.removeAttribute("open");
  }
};

// Close modal
const closeModal = (modal) => {
  if (escapeOk) {
    hideModal(modal);
    window.history.back();
  }
};


window.addEventListener('popstate', event => {
  if (event.state?.isPopup) {
    if (escapeOk) {
      hideModal(visibleModal);
    }
  }
});


// Close with a click outside
document.addEventListener("click", (event) => {
  if (visibleModal != null) {
    const modalContent = visibleModal.querySelector("article");
    const isClickInside = modalContent.contains(event.target);
    !isClickInside && closeModal(visibleModal);
  }
});

// Close with Esc key
document.addEventListener("keydown", (event) => {
  if (event.key === "Escape" && visibleModal != null) {
    closeModal(visibleModal);
  }
});


// Get scrollbar width
const getScrollbarWidth = () => {
  // Creating invisible container
  const outer = document.createElement("div");
  outer.style.visibility = "hidden";
  outer.style.overflow = "scroll"; // forcing scrollbar to appear
  outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
  document.body.appendChild(outer);

  // Creating inner element and placing it in the container
  const inner = document.createElement("div");
  outer.appendChild(inner);

  // Calculating difference between container's full width and the child width
  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;

  // Removing temporary elements from the DOM
  outer.parentNode.removeChild(outer);

  return scrollbarWidth;
};

// Is scrollbar visible
const isScrollbarVisible = () => {
  return document.body.scrollHeight > screen.height;
};

document.addEventListener("DOMContentLoaded", function(e) {
  if (window.location.hash != "") {
    const modal = document.getElementById(window.location.hash.substring(1, window.location.hash.length));
    if (modal != null)
      openModal(modal, false);
  }

});