asdasdasd

(() => {
    'use strict';

    class ProductImageSlider {
        constructor(selector = '.product-image__items:not(.tns-slider)') {
            this.selector = selector;
            this.items = [];
            this.currentMedia = 0;
            this.windowResizeTimeoutId = null;
            this.onWindowResize = this.onWindowResize.bind(this);
        }

        init() {
            let wrappers = document.querySelectorAll(this.selector);

            for (let wrapper of wrappers) {
                let el = new ProductImageSliderEl(wrapper).init();
                this.items.push(el);
            }

            if (window.matchMedia('(min-width: 1024px)').matches) {
                this.currentMedia = 1;
            }

            window.addEventListener('resize', this.onWindowResize);
        }
        onWindowResize() {
            if (this.windowResizeTimeoutId) {
                clearTimeout(this.windowResizeTimeoutId);
            }

            this.windowResizeTimeoutId = setTimeout(() => {
                let beforeResizeMedia = this.currentMedia;

                this.currentMedia = 0;

                if (window.matchMedia('(min-width: 1024px)').matches) {
                    this.currentMedia = 1;
                }
                if ( (this.currentMedia === 1 && beforeResizeMedia === 0) || (this.currentMedia === 0 && beforeResizeMedia === 1) ) {
                    for (let item of this.items) {
                        item.destroy();
                        item.init();
                    }
                } else {
                    for (let item of this.items) {
                        item.imageThumbsSliderControlsHide();
                    }
                }
            }, 250);
        }
    }

    class ProductImageSliderEl {
        constructor(el) {
            this.wrapper = el;
            this.slider = null;
            this.thumbsSlider = null;
            this.productItemEl = null;
            this.imageThumbs = null;
            this.productItemOverlay = null;
            this.imageThumbsItemsEl = null;
            this.sliderNav = false;
            this.thumbsSliderGutter = 10;
            this.init = this.init.bind(this);
            this.destroy = this.destroy.bind(this);
            this.onProductItemElMouseenter = this.onProductItemElMouseenter.bind(this);
            this.onProductItemElMouseleave = this.onProductItemElMouseleave.bind(this);
            this.imageSliderInit = this.imageSliderInit.bind(this);
            this.imageSliderDestroy = this.imageSliderDestroy.bind(this);
            this.onImageSliderTouchDragEnd = this.onImageSliderTouchDragEnd.bind(this);
            this.imageThumbsSliderInit = this.imageThumbsSliderInit.bind(this);
            this.onImageThumbsSliderInit = this.onImageThumbsSliderInit.bind(this);
            this.imageThumbsSliderControlsHide = this.imageThumbsSliderControlsHide.bind(this);
            this.imageThumbsSliderDestroy = this.imageThumbsSliderDestroy.bind(this);
            this.onImageThumbsItemsElMouseover = this.onImageThumbsItemsElMouseover.bind(this);
        }

        init() {
            let wrapper = this.wrapper,
                productItemEl = this.productItemEl = wrapper.closest('.product-item-thumb2');

            if (productItemEl) {
                this.imageThumbsItemsEl = productItemEl.querySelector('.product-image-thumbs__items:not(.tns-slider)');
            }

            if (this.imageThumbsItemsEl) {
                this.sliderNav = true;
                this.imageThumbs = productItemEl.querySelector('.product-image-thumbs');
                this.productItemOverlay = productItemEl.querySelector('.product-item-overlay');
            }

            if (this.imageThumbs && this.productItemOverlay) {
                productItemEl.addEventListener('mouseenter', this.onProductItemElMouseenter);
                productItemEl.addEventListener('mouseleave', this.onProductItemElMouseleave);
            }

            this.imageSliderInit();
            this.imageThumbsSliderInit();

            return this;
        }

        destroy() {
            if (this.productItemEl && this.imageThumbs && this.productItemOverlay) {
                this.productItemEl.classList.remove('image-thumbs-active');
                this.productItemEl.removeEventListener('mouseenter', this.onProductItemElMouseenter);
                this.productItemEl.removeEventListener('mouseleave', this.onProductItemElMouseleave);
            }

            this.imageSliderDestroy();
            this.imageThumbsSliderDestroy();

            this.imageThumbs = null;
            this.productItemOverlay = null;
            this.imageThumbsItemsEl = null;
            this.sliderNav = false;
        }

        onProductItemElMouseenter() {
            if (!window.matchMedia('(min-width: 1024px)').matches) {
                return;
            }

            let imageThumbs = this.imageThumbs,
                productItemOverlay = this.productItemOverlay;

            if (imageThumbs && productItemOverlay) {
                let productItemElRect = this.productItemEl.getBoundingClientRect();

                this.productItemEl.classList.add('image-thumbs-active');

                if (productItemElRect.left >= 115) {
                    imageThumbs.classList.add('product-image-thumbs--left');
                    productItemOverlay.classList.add('product-item-overlay--left');
                } else {
                    imageThumbs.classList.add('product-image-thumbs--right');
                    productItemOverlay.classList.add('product-item-overlay--right');
                }

                let tnsOuter = imageThumbs.querySelector('.tns-outer'),
                    tnsOuterClientHeight;

                if (tnsOuter) {
                    tnsOuterClientHeight = tnsOuter.clientHeight;

                    let productItemOverlayStyle = window.getComputedStyle(productItemOverlay),
                        productItemOverlayTop = parseInt(productItemOverlayStyle.top),
                        productItemOverlayBottom = parseInt(productItemOverlayStyle.bottom);

                    productItemOverlay.style.minHeight = (tnsOuterClientHeight - productItemOverlayTop - productItemOverlayBottom) + 'px';
                }

                let tnsNextButton = this.thumbsSlider ? this.thumbsSlider.getInfo().nextButton : null;

                if (tnsNextButton && tnsOuter) {
                    tnsNextButton.style.top = (tnsOuterClientHeight - tnsNextButton.clientHeight - this.thumbsSliderGutter) + 'px';
                }
            }
        }

        onProductItemElMouseleave() {
            if (!window.matchMedia('(min-width: 1024px)').matches) {
                return;
            }

            let imageThumbs = this.imageThumbs,
                productItemOverlay = this.productItemOverlay;

            if (imageThumbs && productItemOverlay) {
                this.productItemEl.classList.remove('image-thumbs-active');
                imageThumbs.classList.remove('product-image-thumbs--left');
                productItemOverlay.classList.remove('product-item-overlay--left');
                imageThumbs.classList.remove('product-image-thumbs--right');
                productItemOverlay.classList.remove('product-item-overlay--right');
                productItemOverlay.style.minHeight = '';

                let tnsNextButton = this.thumbsSlider ? this.thumbsSlider.getInfo().nextButton : null;

                if (tnsNextButton) {
                    tnsNextButton.style.top = '';
                }
            }
        }

        imageSliderInit() {
            this.slider = tns({
                container: this.wrapper,
                items: 1,
                navPosition: 'bottom',
                loop: false,
                autoHeight: false,
                controls: false,
                autoplayButtonOutput: false, // Отключаем кнопки start/stop
                autoplayHoverPause: true, // Пауза при наведении мыши
                autoplayResetOnVisibility: false, // Не сбрасывать автопрокрутку при изменении видимости
                autoplay: false,
                rewind: true,
                nav: this.sliderNav,
                navAsThumbnails: true,
                navContainer: this.imageThumbsItemsEl,
                swipeAngle: false,
                responsive: {
                    0: {
                        autoplay: true,
                        loop: false
                    },
                    1024: {
                        autoplay: false,
                        loop: false
                    }
                }
            });

            const self = this;

            this.slider.events.on('indexChanged', function(info) {
                if (window.matchMedia('(max-width: 1023px)').matches) {
                    self.thumbsSlider.goTo(info.index);

                    setTimeout(function() {
                        self.slider.play();
                    }, 800);
                }
            });
        }

        imageSliderDestroy() {
            if (this.slider) {
                this.slider.destroy();
                this.slider = null;

                if (this.productItemEl) {
                    this.wrapper = this.productItemEl.querySelector('.product-image__items:not(.tns-slider)');
                }
            }
        }

        onImageSliderTouchDragEnd(info) {
            if (this.thumbsSlider) {
                let index = info.displayIndex - 1;

                this.thumbsSlider.goTo(index);
            }

        }

        imageThumbsSliderInit() {
            let productItemEl = this.productItemEl,
                imageThumbsItemsEl = null,
                thumbsSliderAxis = 'horizontal',
                thumbsSliderAutoWidth = true;

            if (productItemEl) {
                imageThumbsItemsEl = this.imageThumbsItemsEl = productItemEl.querySelector('.product-image-thumbs__items:not(.tns-slider)');
            }

            if (window.matchMedia('(min-width: 1024px)').matches) {
                thumbsSliderAxis = 'vertical';
                thumbsSliderAutoWidth = false;
            }

            if (imageThumbsItemsEl) {
                this.thumbsSlider = tns({
                    container: imageThumbsItemsEl,
                    axis: thumbsSliderAxis,
                    autoWidth: thumbsSliderAutoWidth,
                    items: 5,
                    nav: false,
                    autoplayButtonOutput: false, // Отключаем кнопки start/stop
                    autoplayHoverPause: true, // Пауза при наведении мыши
                    autoplayResetOnVisibility: false, // Не сбрасывать автопрокрутку при изменении видимости
                    autoHeight: false,
                    controls: true,
                    controlsPosition: 'bottom',
                    gutter: this.thumbsSliderGutter,
                    onInit: this.onImageThumbsSliderInit,
                    responsive: {
                        0: {
                            loop: false,
                            autoplay: false
                        },
                        1024: {
                            autoplay: false,
                            loop: false
                        }
                    }
                });

                imageThumbsItemsEl.addEventListener('mouseover', this.onImageThumbsItemsElMouseover);

                if (this.slider) {
                    this.slider.events.on('touchEnd', this.onImageSliderTouchDragEnd);
                    this.slider.events.on('dragEnd', this.onImageSliderTouchDragEnd);
                }
            }
        }

        imageThumbsSliderDestroy() {
            if (this.thumbsSlider && this.imageThumbsItemsEl) {
                this.imageThumbsItemsEl.removeEventListener('mouseover', this.onImageThumbsItemsElMouseover);
                this.thumbsSlider.destroy();
                this.thumbsSlider = null;
            }
        }

        onImageThumbsSliderInit() {
            this.imageThumbsSliderControlsHide();
        }

        imageThumbsSliderControlsHide() {
            let info = this.thumbsSlider.getInfo(),
                nextButton = info.nextButton,
                nextButtonVisible = false,
                imageThumbs = this.imageThumbs,
                productItemOverlay = this.productItemOverlay;

            if (nextButton) {
                nextButtonVisible = nextButton.offsetWidth || nextButton.offsetHeight || nextButton.getClientRects().length;
            }

            if (!nextButtonVisible && imageThumbs && productItemOverlay) {
                if (window.matchMedia('(min-width: 1024px)').matches) {
                    let tnsOuter = imageThumbs.querySelector('.tns-outer');

                    if (tnsOuter) {
                        tnsOuter.classList.add('hidden-controls');
                    }
                } else {
                    let thumbsItemsWrapper = imageThumbs.querySelector('.product-image-thumbs__items-wrapper');

                    if (thumbsItemsWrapper) {
                        thumbsItemsWrapper.classList.add('hidden-controls');
                    }
                }
            }
        }

        onImageThumbsItemsElMouseover(e) {
            let imageThumbsEl = e.target.closest('.product-image-thumbs__item-wrapper');

            if (imageThumbsEl) {
                imageThumbsEl.click();
            }
        }
    }

    window.ProductImageSlider = ProductImageSlider;
})();

(() => {
    'use strict';

    document.addEventListener('DOMContentLoaded', () => {
        new window.ProductImageSlider().init();
    });
})();
$(document).on("ajaxComplete", function() {
    new window.ProductImageSlider().init();
});