import BaseComponent from './BaseComponent.js';

/**
 * ProductGallery component
 * Manages product image gallery with Swiper.js
 * Handles main image display and thumbnail navigation
 */

class ProductGallery extends BaseComponent {
    constructor(containerSelector, images) {
        super(containerSelector);
        this.images = images || [];
        this.mainSwiper = null;
        this.thumbsSwiper = null;
        this.currentImageIndex = 0;
    }

    /**
     * Initialize gallery with Swiper
     */
    init() {
        if (!this.images || this.images.length === 0) {
            console.warn('ShopyPress: No images to display in gallery');
            return;
        }

        // Initialize thumbnails swiper first
        if (this.images.length > 1) {
            this.thumbsSwiper = new Swiper('.shopypress-thumbs-swiper', {
                spaceBetween: 10,
                slidesPerView: 4,
                freeMode: true,
                watchSlidesProgress: true,
                breakpoints: {
                    640: {
                        slidesPerView: 5,
                    },
                    768: {
                        slidesPerView: 4,
                    },
                },
            });
        }

        // Initialize main swiper
        this.mainSwiper = new Swiper('.shopypress-main-swiper', {
            spaceBetween: 10,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: this.thumbsSwiper,
            },
            on: {
                slideChange: (swiper) => {
                    this.currentImageIndex = swiper.activeIndex;
                    this.onSlideChange(swiper.activeIndex);
                },
            },
        });

        console.log('ShopyPress: Gallery initialized with', this.images.length, 'images');
    }

    /**
     * Switch to specific image by ID
     * @param {string} imageId - The image ID to switch to
     */
    switchToImage(imageId) {
        if (!imageId || !this.mainSwiper) {
            return;
        }

        // Find image index by ID
        const imageIndex = this.images.findIndex(img => img.id === imageId);

        if (imageIndex >= 0 && imageIndex !== this.currentImageIndex) {
            this.mainSwiper.slideTo(imageIndex);
            console.log('ShopyPress: Switched to image', imageId, 'at index', imageIndex);
        }
    }

    /**
     * Switch to image by index
     * @param {number} index - Image index
     */
    switchToImageByIndex(index) {
        if (!this.mainSwiper || index < 0 || index >= this.images.length) {
            return;
        }

        if (index !== this.currentImageIndex) {
            this.mainSwiper.slideTo(index);
        }
    }

    /**
     * Handle slide change event
     * @param {number} index - New active index
     */
    onSlideChange(index) {
        // Trigger custom event for other components
        if (window.ShopyPressEventBus) {
            window.ShopyPressEventBus.trigger('gallery:imageChanged', {
                index: index,
                image: this.images[index],
            });
        }
    }

    /**
     * Get current image
     */
    getCurrentImage() {
        return this.images[this.currentImageIndex] || null;
    }

    /**
     * Destroy gallery
     */
    destroy() {
        if (this.mainSwiper) {
            this.mainSwiper.destroy();
            this.mainSwiper = null;
        }
        if (this.thumbsSwiper) {
            this.thumbsSwiper.destroy();
            this.thumbsSwiper = null;
        }
    }
}

export default ProductGallery;
