import Swiper, { Thumbs, Navigation, Pagination } from 'swiper';

export default class ProductImageSwiper {
    constructor(el) {
        this.el = el;

        // Initialize thumbsSwiper
        this.thumbsSwiper = new Swiper(this.el.querySelector('.thumbsSwiper'), {
            spaceBetween: 10,
            slidesPerView: 'auto',
            freeMode: true,
            centerInsufficientSlides: true,
        });

        // Initialize mainSwiper
        this.mainSwiper = new Swiper(this.el.querySelector('.mainSwiper'), {
            loop: true,
            spaceBetween: 10,
            modules: [Thumbs, Navigation, Pagination],
            navigation: {
                nextEl: this.el.querySelector('.swiper-button-next '),
                prevEl: this.el.querySelector('.swiper-button-prev'),
            },
            thumbs: {
                swiper: this.thumbsSwiper,
            },
            on: {
                slideChange: () => this.handleVideoPlayback(),
            }
        });

        if (this.mainSwiper && this.mainSwiper.slides && this.mainSwiper.slides.length > 0) {
            this.handleVideoPlayback();
        }
    }

    handleVideoPlayback() {
        if (!this.mainSwiper || !this.mainSwiper.slides) return;

        document.querySelectorAll('.swiper-video').forEach(iframe => {
            const src = iframe.getAttribute('src');

            iframe.setAttribute('src', src.replace("&autoplay=1", "").replace("?autoplay=1", ""));
        });

        const activeSlide = this.mainSwiper.slides[this.mainSwiper.activeIndex];
        if (!activeSlide) return;

        const activeVideo = activeSlide.querySelector('.swiper-video');
        if (activeVideo) {
            const src = activeVideo.getAttribute('src');
            if (!src.includes("autoplay=1")) {
                activeVideo.setAttribute('src', src + (src.includes('?') ? '&' : '?') + "autoplay=1");
            }
        }
    }
}