/*
    Конфигурация в зависимости от количества видимых фото
 */

function owlOptionsCountPhoto(el) {
    let countPhoto = el.$element.attr('data-photo-count');

    if(countPhoto == 3) {
        el.options.responsive = {
            991: {
                items: 3
            },
            767: {
                items: 3
            },
            575: {
                items: 3
            },
            0: {
                items: 1,
                dots: true,
                nav: false
            },
        }
    }

    if(countPhoto == 2) {
        el.options.margin = 24;
        el.options.responsive = {
            991: {
                items: 2
            },
            767: {
                items: 2
            },
            575: {
                items: 1
            },
            0: {
                items: 1,
                dots: true,
                nav: false
            },
        }
    }

    el.trigger('refresh.owl.carousel');
}

/*
    Отступ стрелок сверху - посередине
 */
function owlNavTop(el, imgEl = '.owl-stage-outer') {
    let car = el.$element;

    let stageOuter = car.find(imgEl);
    let nav = car.find('.owl-nav');

    // отступ навигации сверху посередине слайдера фото
    let navTop = stageOuter.height() / 2 - nav.find('.owl-prev-inner').height() / 2;
    if(navTop && navTop > 0) {
        nav.css('top', navTop);
    }
}


document.addEventListener("DOMContentLoaded", (event) => {
    let navText = [
        '<div class="owl-prev-inner"><span></span></div>',
        '<div class="owl-next-inner"><span></span></div>'
    ];

    /*
        Примеры гравировок
     */

    let contentGal = {
        owl: $('.content-gal__items'),

        events(event) {
            owlOptionsCountPhoto(this);
            owlNavTop(this);
        },
    };

    contentGal.conf = {
        loop: false,
        margin: 16,
        slideBy: 1,
        nav: true,
        navText: [
            '<div class="owl-prev-inner"><span></span></div>',
            '<div class="owl-next-inner"><span></span></div>'
        ],
        dots: false,
        responsive: {
            991: {
                items: 4,
            },
            767: {
                items: 3
            },
            575: {
                items: 2
            },
            0: {
                items: 1,
                dots: true,
                nav: false
            },
        },

        onInitialize: contentGal.events,
        onInitialized: contentGal.events,
        onResized: contentGal.events,
        onRefreshed: contentGal.events,
        onChange: contentGal.events,
    };

    contentGal.owl.owlCarousel(contentGal.conf);



    /*
        Зачем нужен дизайн-проект
    */

    let whyNeed = {
        owl: $('.why-need__items'),

        onInitialize() {
            owlOptionsCountPhoto(this);
        },

        onInitialized(el) {
            owlNavTop(this);
        },

        onResized() {
            owlNavTop(this);
        },

        onRefreshed() {
            owlOptionsCountPhoto(this);
            owlNavTop(this);
        },

        onChange() {
            owlNavTop(this);
        }
    };

    whyNeed.conf = {
        loop: true,
        slideBy: 1,
        items: 1,
        nav: true,
        dots: false,
        navText: [
            '<div class="owl-prev-inner"><span></span></div>',
            '<div class="owl-next-inner"><span></span></div>'
        ],
        responsive: {
            767: {},
            575: {
                dots: false,
                nav: true
            },
            0: {
                dots: true,
                nav: false
            },
        },

        onInitialize: whyNeed.onInitialize,
        onInitialized: whyNeed.onInitialized,
        onResized: whyNeed.onResized,
        onRefreshed: whyNeed.onRefreshed,
        onChange: whyNeed.onChange,
    };

    whyNeed.owl.owlCarousel(whyNeed.conf);


    /*
        Блок услуг
    */

    let servicesBlock = {
        owl: $('.services-section_other .services__items'),

        onInitialize() {
            owlOptionsCountPhoto(this);
        },

        onInitialized(el) {
            owlNavTop(this);
        },

        onResized() {
            owlNavTop(this);
        },

        onRefreshed() {
            owlOptionsCountPhoto(this);
            owlNavTop(this);
        },

        onChange() {
            owlNavTop(this);
        }
    };

    servicesBlock.conf = {
        loop: true,
        slideBy: 1,
        items: 1,
        nav: false,
        margin: 10,
        dots: true,

        onInitialize: servicesBlock.onInitialize,
        onInitialized: servicesBlock.onInitialized,
        onResized: servicesBlock.onResized,
        onRefreshed: servicesBlock.onRefreshed,
        onChange: servicesBlock.onChange,
    };

    $(window).on('load resize', function () {
        if ($(window).width() > 767) {
            servicesBlock.owl.removeClass('owl-carousel');
            servicesBlock.owl.removeClass('owl-carousel_nav');
            servicesBlock.owl.removeClass('owl-carousel_nav-red');

            servicesBlock.owl.trigger('destroy.owl.carousel');
        } else {
            servicesBlock.owl.addClass('owl-carousel');
            servicesBlock.owl.addClass('owl-carousel_nav');
            servicesBlock.owl.addClass('owl-carousel_nav-red');

            servicesBlock.owl.owlCarousel(servicesBlock.conf);
        }
    });


    /*
        Отзывы Яндекс
    */

    // скрытие раскрытого текста при перелистывании слайдера
    function displayCountPages(el) {
        let reviews = el.$element.closest('.reviews');
        let pages = reviews.find('.reviews__pages')

        if (pages.length > 0) {
            pages.css('visibility', 'visible')
        }
    }

    function hideExpandText(el) {
        el.$element.find('.owl-item').each(function (index, item) {
            $(item).find('.review__dots').show();
            $(item).find('.review__hide').hide();
            $(item).find('.review__else').removeClass('review__else_hide');
        });
        //el.refresh()
    }

    // подсчёт количества страниц перелистывания
    function reviewsCountPages(el) {
        let reviews = el.$element.closest('.reviews');
        let dots = el.$element.find('.owl-dot');
        let dotsLength = dots.length;

        dots.each(function (index, item) {
            if ($(item).hasClass('active')) {
                reviews.find('.reviews__page-current').html(index + 1);
                reviews.find('.reviews__page-count').html(dotsLength);
            }
        });
    }

    let reviews = {
        owl: $('.reviews__owl-carousel'),
        events(event) {
            owlNavTop(this, this.owl);

            if (event.type == 'changed') {
                hideExpandText(this);
            }

            if (event.type == 'changed' || event.type == 'initialized' || event.type == 'resized') {
                reviewsCountPages(this);
                displayCountPages(this)
            }
        }
    };

    reviews.conf = {
        loop: false,
        slideBy: 2,
        items: 2,
        nav: true,
        margin: 24,
        dots: true,
        navText: [
            '<div class="owl-prev-inner"><span></span></div>',
            '<div class="owl-next-inner"><span></span></div>'
        ],

        responsive: {
            991: {
                items: 2,
                slideBy: 2,
            },
            0: {
                items: 1,
                slideBy: 1,
                nav: false,
            },

            // 0: {
            //     items: 1,
            //     dots: true,
            //     nav: false
            // },
        },

        onInitialize: reviews.events,
        onInitialized: reviews.events,
        onResize: reviews.events,
        onResized: reviews.events,
        onRefreshed: reviews.events,
        onChange: reviews.events,
        onChanged: reviews.events,
    };

    reviews.owl.owlCarousel(reviews.conf);
    $(window).on('load resize', function () {
        reviews.owl.owlCarousel(reviews.conf);
    });


    /*
        Галерея в контенте
     */

    let contentGallery = {
        owl: $('.content-gallery__items'),

        events(event) {
            owlOptionsCountPhoto(this);
            owlNavTop(this);
        },
    };

    contentGallery.conf = {
        loop: true,
        margin: 16,
        slideBy: 1,
        nav: true,
        navText: [
            '<div class="owl-prev-inner"><span></span></div>',
            '<div class="owl-next-inner"><span></span></div>'
        ],
        dots: false,
        responsive: {
            991: {
                items: 4,
            },
            767: {
                items: 3
            },
            575: {
                items: 2
            },
            0: {
                items: 1,
                dots: true,
                nav: false
            },
        },

        onInitialize: contentGallery.events,
        onInitialized: contentGallery.events,
        onResized: contentGallery.events,
        onRefreshed: contentGallery.events,
        onChange: contentGallery.events,
    };

    contentGallery.owl.owlCarousel(contentGallery.conf);


    // $(window).on('load resize', function() {
    //     if ($(window).width() > 767) {
    //         contentGallery.owl.removeClass('owl-carousel');
    //         contentGallery.owl.removeClass('owl-carousel_nav');
    //         contentGallery.owl.removeClass('owl-carousel_nav-red');
    //
    //         contentGallery.owl.trigger('destroy.owl.carousel');
    //     } else {
    //         contentGallery.owl.addClass('owl-carousel');
    //         contentGallery.owl.addClass('owl-carousel_nav');
    //         contentGallery.owl.addClass('owl-carousel_nav-red');
    //
    //         contentGallery.owl.owlCarousel(contentGallery.conf);
    //     }
    // });

    /*
        Галерея на странице товара
     */

    let productGallery = {
        owl: $('.product-gallery__items'),
        events(event) {
            owlNavTop(this, this.owl);
        }
    };

    productGallery.conf = {
        loop: false,
        slideBy: 1,
        items: 3,
        nav: true,
        margin: 16,
        dots: false,
        navText: navText,

        responsive: {
            1199: {
                margin: 24,
            },

            767: {
                items: 3,
                slideBy: 1,
                dots: false,
                nav: true
            },

            0: {
                items: 1,
                slideBy: 1,
                dots: true,
                nav: false,
            },
        },

        onInitialize: productGallery.events,
        onInitialized: productGallery.events,
        onResize: productGallery.events,
        onResized: productGallery.events,
        onRefreshed: productGallery.events,
        onChange: productGallery.events,
        onChanged: productGallery.events,
    };

    productGallery.owl.owlCarousel(productGallery.conf);

    /*
        Блок решаем вопросы
     */

    let resolveSlider = {
        owl: $('.resolve-slider__items'),
        events(event) {
            let slider = this.$element;

            //owlNavTop(this, this.owl);

            if (event.type == 'initialized' || event.type == 'resized' || event.type == 'resize') {
                resolveSlider.navTop(this, slider);
            }

            if (event.type == 'changed' || event.type == 'initialized' || event.type == 'resized') {

            }
        }
    };

    resolveSlider.navTop = function (el, slider) {
        let nav = slider.find('.owl-nav');
        let slides = el._items
        let maxSlideHeight = 0;

        for (key in slides) {
            let slide = slides[key]
            let height = slide.find('.resolve-slider__item-wrap').height()

            if (height > 0) {
                maxSlideHeight = height
            }

            //slide.find('.resolve-slider__item-wrap').css('height', '')
            //slide.find('.resolve-slider__item-wrap').removeAttr('style')
            //console.log('height', slide.find('.resolve-slider__item-wrap').attr('style'))
        }

        console.log(maxSlideHeight)

        for (key in slides) {
            let slide = slides[key]
            let height = slide.find('.resolve-slider__item-wrap').height(maxSlideHeight)

            if (slide.hasClass('active')) {
                // отступ навигации сверху посередине слайдера фото
                let slideHeight = slide.height()
                let navHeight = nav.find('.owl-prev-inner').height()

                let navTop = slideHeight / 2 - navHeight / 2;
                //console.log(slideHeight, navHeight, navTop)

                if (navTop && navTop > 0) {
                    nav.css('top', navTop);
                }
            }


            //slide.height(maxSlideHeight)
        }
    }

    resolveSlider.conf = {
        loop: true,
        slideBy: 1,
        items: 1,
        nav: true,
        //margin: 24,
        dots: true,
        navText: [
            '<span class="slider-arrow prev slick-arrow" href="#" style=""><img src="/front/site/svg/arrow-left-grey.svg" alt=""></span>',
            '<span class="slider-arrow next slick-arrow" href="#" style=""><img src="/front/site/svg/arrow-left-grey.svg" alt=""></span>'
        ],

        responsive: {
            // 991: {
            //     items: 2,
            //     slideBy: 2,
            // },
            // 0: {
            //     items: 1,
            //     slideBy: 1,
            //     nav: false,
            // },

            // 0: {
            //     items: 1,
            //     dots: true,
            //     nav: false
            // },
        },

        onInitialize: resolveSlider.events,
        onInitialized: resolveSlider.events,
        onResize: resolveSlider.events,
        onResized: resolveSlider.events,
        onRefreshed: resolveSlider.events,
        onChange: resolveSlider.events,
        onChanged: resolveSlider.events,
    };

    resolveSlider.owl.owlCarousel(resolveSlider.conf);

    $(window).on('load resize', function () {
        //resolveSlider.owl.owlCarousel(resolveSlider.conf);
    });


    /*
        Табы товара
    */

    // let tabsProduct = {
    //     owl: $('.tabs_product .tabs__items'),
    //     events(event) {
    //         owlNavTop(this, this.owl);
    //     }
    // };
    //
    // tabsProduct.conf = {
    //     loop: false,
    //     //slideBy: 1,
    //     items: 3,
    //     nav: true,
    //     autoWidth:true,
    //     margin: 20,
    //     dots: false,
    //
    //     onInitialize: tabsProduct.events,
    //     onInitialized: tabsProduct.events,
    //     onResize: tabsProduct.events,
    //     onResized: tabsProduct.events,
    //     onRefreshed: tabsProduct.events,
    //     onChange: tabsProduct.events,
    //     onChanged: tabsProduct.events,
    // };
    //
    // tabsProduct.owl.owlCarousel(tabsProduct.conf);
    //
    // $(window).on('load resize', function() {
    //     if ($(window).width() > 1200) {
    //         tabsProduct.owl.removeClass('owl-carousel');
    //         tabsProduct.owl.removeClass('owl-carousel_nav');
    //         tabsProduct.owl.removeClass('owl-carousel_nav-red');
    //
    //         tabsProduct.owl.trigger('destroy.owl.carousel');
    //     } else {
    //         tabsProduct.owl.addClass('owl-carousel');
    //         tabsProduct.owl.addClass('owl-carousel_nav');
    //         tabsProduct.owl.addClass('owl-carousel_nav-red');
    //
    //         tabsProduct.owl.owlCarousel(tabsProduct.conf);
    //     }
    // });

})