/**
 * Product Image Slideshow
 */

(function () {
  "use strict";

  // Initialize slideshow on DOM ready
  function initProductImageSlideshow() {
    const slideshowContainers = document.querySelectorAll(
      ".brandy-product-image-slideshow"
    );

    slideshowContainers.forEach((container) => {
      const mainImage = container.querySelector(
        'img[data-testid="product-image"]'
      );
      const slideImages = container.querySelectorAll(".brandy-slide-image");
      const displaySecondaryImage = container.classList.contains(
        "brandy-display-secondary-image"
      );
      // Skip if no gallery images
      if (!slideImages || slideImages.length === 0) {
        return;
      }

      const totalSlides = slideImages.length; // +1 for main image
      let currentSlideIndex = 0;
      let savedSlideIndex = 0; // Save the index before starting auto-slide
      let isHovering = false;

      // Create navigation arrows
      if (!displaySecondaryImage) {
        createArrows(container);
      }

      // Set up event listeners
      setupEventListeners(container, slideImages, mainImage);

      function createArrows(container) {
        // Previous arrow
        const prevArrow = document.createElement("button");
        prevArrow.className = "brandy-product-image-slideshow--arrow brandy-product-image-slideshow--arrow-prev";
        prevArrow.setAttribute("aria-label", "Previous image");
        prevArrow.innerHTML =
          '<svg style="rotate: 180deg;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" bis_size="{&quot;x&quot;:620,&quot;y&quot;:880,&quot;w&quot;:20,&quot;h&quot;:20,&quot;abs_x&quot;:972,&quot;abs_y&quot;:1010}"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px" vector-effect="non-scaling-stroke" d="M4.25 10h11.5m0 0-4-4m4 4-4 4" bis_size="{&quot;x&quot;:624,&quot;y&quot;:886,&quot;w&quot;:11,&quot;h&quot;:8,&quot;abs_x&quot;:976,&quot;abs_y&quot;:1016}"></path></svg>';
        prevArrow.addEventListener("click", (e) => {
          e.preventDefault();
          e.stopPropagation();
          previousSlide();
          if (savedSlideIndex === 0) {
            savedSlideIndex = totalSlides;
          } else {
            savedSlideIndex = savedSlideIndex - 1;
          }
        });

        // Next arrow
        const nextArrow = document.createElement("button");
        nextArrow.className = "brandy-product-image-slideshow--arrow brandy-product-image-slideshow--arrow-next";
        nextArrow.setAttribute("aria-label", "Next image");
        nextArrow.innerHTML =
          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" bis_size="{&quot;x&quot;:548,&quot;y&quot;:880,&quot;w&quot;:20,&quot;h&quot;:20,&quot;abs_x&quot;:900,&quot;abs_y&quot;:1010}"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px" vector-effect="non-scaling-stroke" d="M4.25 10h11.5m0 0-4-4m4 4-4 4" bis_size="{&quot;x&quot;:552,&quot;y&quot;:886,&quot;w&quot;:11,&quot;h&quot;:8,&quot;abs_x&quot;:904,&quot;abs_y&quot;:1016}"></path></svg>';
        nextArrow.addEventListener("click", (e) => {
          e.preventDefault();
          e.stopPropagation();
          nextSlide();
          if (savedSlideIndex === totalSlides) {
            savedSlideIndex = 0;
          } else {
            savedSlideIndex = savedSlideIndex + 1;
          }
        });

        // Find the link element to append arrows to
        const link = container.querySelector("a");
        if (link) {
          link.appendChild(prevArrow);
          link.appendChild(nextArrow);
        }
      }

      function setupEventListeners(container, slideImages, mainImage) {
        // Mouse enter - save current position and start auto-cycling
        container.addEventListener("mouseenter", () => {
          const stopHoverEffect = container.querySelector(".stop-hover-effect");
          if (stopHoverEffect) {
            return;
          }
          isHovering = true;
          savedSlideIndex = currentSlideIndex; // Save current position before cycling
          nextSlide(); // Immediately show next slide
        });

        // Mouse leave - stop cycling and return to saved position
        container.addEventListener("mouseleave", () => {
          isHovering = false;
          returnToSavedSlide();
        });

        // Touch events for mobile
        let touchStartX = 0;
        let touchEndX = 0;

        container.addEventListener(
          "touchstart",
          (e) => {
            touchStartX = e.changedTouches[0].screenX;
          },
          { passive: true }
        );

        container.addEventListener(
          "touchend",
          (e) => {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
          },
          { passive: true }
        );

        function handleSwipe() {
          const swipeThreshold = 50;
          if (touchEndX < touchStartX - swipeThreshold) {
            // Swipe left - next slide
            nextSlide();
            savedSlideIndex = currentSlideIndex; // Update saved index when swiping
          } else if (touchEndX > touchStartX + swipeThreshold) {
            // Swipe right - previous slide
            previousSlide();
            savedSlideIndex = currentSlideIndex; // Update saved index when swiping
          }
        }
      }

      function goToSlide(index) {
        currentSlideIndex = index;

        // Update images
        if (index === 0) {
          // Show main image
          mainImage.style.opacity = "1";
          slideImages.forEach((img) => {
            img.classList.remove("active");
          });
          container.classList.remove("has-active-slide");
        } else {
          // Show gallery image
          mainImage.style.opacity = "0";
          container.classList.add("has-active-slide");
          slideImages.forEach((img, i) => {
            if (i === index - 1) {
              img.classList.add("active");
            } else {
              img.classList.remove("active");
            }
          });
        }
      }

      function nextSlide() {
        const totalSlides = slideImages.length + 1; // +1 for main image
        currentSlideIndex = (currentSlideIndex + 1) % totalSlides;
        goToSlide(currentSlideIndex);
      }

      function previousSlide() {
        const totalSlides = slideImages.length + 1; // +1 for main image
        currentSlideIndex = (currentSlideIndex - 1 + totalSlides) % totalSlides;
        goToSlide(currentSlideIndex);
      }

      function returnToSavedSlide() {
        // Return to the saved slide index after a short delay
        if (!isHovering) {
          goToSlide(savedSlideIndex);
        }
      }

      // Keyboard navigation
      container.addEventListener("keydown", (e) => {
        if (e.key === "ArrowLeft") {
          e.preventDefault();
          previousSlide();
          savedSlideIndex = currentSlideIndex; // Update saved index when manually navigating
        } else if (e.key === "ArrowRight") {
          e.preventDefault();
          nextSlide();
          savedSlideIndex = currentSlideIndex; // Update saved index when manually navigating
        }
      });
    });
  }

  // Initialize on DOM ready
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initProductImageSlideshow);
  } else {
    initProductImageSlideshow();
  }

  // Re-initialize on dynamic content load (e.g., AJAX product loading)
  document.addEventListener(
    "wc-blocks_render_blocks_frontend",
    initProductImageSlideshow
  );
  document.addEventListener("updated_wc_div", initProductImageSlideshow);
})();
