const loadImage = (path) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // img.crossOrigin = "Anonymous";
    img.src = path;
    img.onload = () => {
      resolve(img);
    };
    img.onerror = (e) => {
      reject(e);
    };
  });
};

const handleClick = async (e) => {
  // Get references to the elements
  const $link = e.target.closest("a");
  const $gallery = e.target.closest(".gallery");

  // Bail out
  if (!$link || !$gallery) return false;

  // Remove active from previous active link
  $gallery.querySelector("a.active")?.classList.remove("active");

  // Add .active to clicked link
  $link.classList.add("active");

  // Update main image
  const $img = $link.querySelector("img");
  const url = $img.getAttribute("src");
  const img = await loadImage(url);
  $gallery.querySelector(".gallery__large img").setAttribute("src", url);
};

document.querySelectorAll(".gallery").forEach(($gallery) => {
  $gallery.querySelectorAll("a").forEach(($link) => {
    $link.addEventListener("click", async (e) => {
      // Prevent double clicks
      if ($link.classList.contains("active")) return false;

      e.preventDefault();
      e.stopPropagation();

      if (!document.startViewTransition || skipViewTransitions?.checked) {
        handleClick(e);
      } else {
        const $curImage = $gallery.querySelector("a.active img");
        const $newImage = $link.querySelector("img");
        const $largeImage = $gallery.querySelector(".gallery__large img");

        $newImage.style.viewTransitionName = "grow";
        $largeImage.style.viewTransitionName = "shrink";

        const t = document.startViewTransition(async () => {
          $largeImage.style.viewTransitionName = "grow";
          $curImage.style.viewTransitionName = "shrink";
          $newImage.style.viewTransitionName = "none";
          await handleClick(e);
        });

        await t.finished;
        $curImage.style.viewTransitionName = "none";
        $newImage.style.viewTransitionName = "none";
        $largeImage.style.viewTransitionName = "none";
      }
    });
  });
});