Product Media Gallery

import Swiper from 'swiper';

class ProductMediaGallery {
    constructor(el, options = {}) {
        this.el = el;
        this.mainCarouselSelector = this.el.querySelector('.js-product-media-gallery');
        this.thumbsCarouselSelector = this.el.querySelector('.js-product-media-gallery-thumbs');

        // Navigation buttons
        this.prevButton = this.el.querySelector('.js-prev-button');
        this.nextButton = this.el.querySelector('.js-next-button');
        this.thumbsPrevButton = this.el.querySelector('.js-thumbs-prev-button');
        this.thumbsNextButton = this.el.querySelector('.js-thumbs-next-button');

        // Current slide from data attribute or options
        this.currentSlide = options.currentSlide || parseInt(this.el.dataset.currentSlide) || 0;
        this.init();
    }

    init() {
        // Initialize product media gallery carousel first
        this.thumbsCarousel = new Swiper(this.thumbsCarouselSelector, {
            slidesPerView: 'auto',
            spaceBetween: 16,
            watchSlidesProgress: true,
            centeredSlides: false,
            navigation: {
                nextEl: this.thumbsNextButton,
                prevEl: this.thumbsPrevButton
            },
            on: {
                init: () => {
                    this.updateThumbnailNavigation();
                },
                slideChange: () => {
                    this.updateThumbnailNavigation();
                }
            }
        });

        // Initialize main carousel and sync with thumbnails
        this.mainCarousel = new Swiper(this.mainCarouselSelector, {
            spaceBetween: 10,
            initialSlide: this.currentSlide,
            navigation: {
                nextEl: this.nextButton,
                prevEl: this.prevButton
            },
            thumbs: {
                swiper: this.thumbsCarousel
            },
            keyboard: {
                enabled: true,
                onlyInViewport: true
            },
            a11y: {
                prevSlideMessage: (this.prevButton && this.prevButton.getAttribute('aria-label')) || 'Föregående bild',
                nextSlideMessage: (this.nextButton && this.nextButton.getAttribute('aria-label')) || 'Nästa bild'
            },
            on: {
                init: () => {
                    this.updateNavigationButtons();
                    this.dispatchCurrentSlide();
                },
                slideChange: () => {
                    this.updateNavigationButtons();
                    this.dispatchCurrentSlide();
                }
            }
        });
        this.attachEventListeners();

        // Update to current slide for both carousels
        this.mainCarousel.slideTo(this.currentSlide, 0, false);
        this.thumbsCarousel.slideTo(this.currentSlide, 0, false);
        this.thumbsCarousel.update();
        this.mainCarousel.update();
        this.updateNavigationButtons();
        this.updateThumbnailNavigation();
    }

    // Dispatchar currentSlide-event på galleriets root-element
    dispatchCurrentSlide() {
        if (!this.el || !this.mainCarousel) return;
        const activeIndex = this.mainCarousel.activeIndex != null ? this.mainCarousel.activeIndex : 0;
        this.el.dispatchEvent(new CustomEvent('currentSlide', { detail: { slide: activeIndex } }));
    }

    attachEventListeners() {
        // Keyboard navigation on thumbnails
        const thumbnails = this.thumbsCarouselSelector.querySelectorAll('.product-media-gallery__thumbnail');
        thumbnails.forEach((thumb, index) => {
            thumb.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    this.mainCarousel.slideTo(index);
                }
            });
        });
    }

    updateNavigationButtons() {
        if (!this.mainCarousel) return;

        const isFirst = this.mainCarousel.isBeginning;
        const isLast = this.mainCarousel.isEnd;

        // Hide/show prev button
        if (this.prevButton) {
            if (isFirst) {
                this.prevButton.style.display = 'none';
                this.prevButton.disabled = true;
            } else {
                this.prevButton.style.display = 'flex';
                this.prevButton.disabled = false;
            }
        }

        // Hide/show next button
        if (this.nextButton) {
            if (isLast) {
                this.nextButton.style.display = 'none';
                this.nextButton.disabled = true;
            } else {
                this.nextButton.style.display = 'flex';
                this.nextButton.disabled = false;
            }
        }
    }

    updateThumbnailNavigation() {
        if (!this.thumbsCarousel) return;

        const isFirst = this.thumbsCarousel.isBeginning;
        const isLast = this.thumbsCarousel.isEnd;

        // Hide/show thumbnail prev button
        if (this.thumbsPrevButton) {
            if (isFirst) {
                this.thumbsPrevButton.style.display = 'none';
                this.thumbsPrevButton.disabled = true;
            } else {
                this.thumbsPrevButton.style.display = 'flex';
                this.thumbsPrevButton.disabled = false;
            }
        }

        // Hide/show thumbnail next button
        if (this.thumbsNextButton) {
            if (isLast) {
                this.thumbsNextButton.style.display = 'none';
                this.thumbsNextButton.disabled = true;
            } else {
                this.thumbsNextButton.style.display = 'flex';
                this.thumbsNextButton.disabled = false;
            }
        }
    }

    goToSlide(index) {
        if (this.mainCarousel) {
            console.log('Going to slide:', index);
            this.mainCarousel.slideTo(index);
            this.updateNavigationButtons();
            this.updateThumbnailNavigation();
        }
    }

    destroy() {
        // Destroy carousels
        if (this.mainCarousel) {
            this.mainCarousel.destroy(true, true);
        }
        if (this.thumbsCarousel) {
            this.thumbsCarousel.destroy(true, true);
        }
    }
}

export default ProductMediaGallery;