import PhotoSwipeLightbox from "photoswipe/lightbox";
import Masonry from "masonry-layout";

const lightbox = new PhotoSwipeLightbox({
  gallery: ".lightbox",
  children: ".pswp-image",
  showAnimationDuration: 300,
  hideAnimationDuration: 300,
  initialZoomLevel: "fit",
  pswpModule: () => import("photoswipe"),
  paddingFn: () => {
    const captionHeight =
      5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
    return {
      top: captionHeight,
      bottom: captionHeight,
      left: 0,
      right: 0,
    };
  },
});

lightbox.on("uiRegister", function () {
  lightbox.pswp.ui.registerElement({
    name: "caption",
    order: 9,
    isButton: false,
    appendTo: "root",
    onInit: (el, _) => {
      lightbox.pswp.on("change", () => {
        const element = lightbox.pswp.currSlide.data.element;
        el.innerHTML =
          element?.parentElement.querySelector(".pswp-caption-content")
            ?.innerHTML || "";
      });
    },
  });
});

lightbox.init();

const masonryContainers = document.querySelectorAll(".masonry");
masonryContainers.forEach((container) => {
  new Masonry(container, {
    itemSelector: ".grid-item",
    columnWidth: ".grid-sizer",
    percentPosition: true,
  });
});