( function( $ ) {
    "use strict";
    $( window ).on( 'elementor/frontend/init', function() {
        elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_testimonial.default', function( $scope ) {
            pxl_swiper_handler($scope);
        });
        elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_post_carousel.default', function( $scope ) {
            pxl_swiper_handler($scope);
        });
        elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_team.default', function( $scope ) {
            pxl_swiper_handler($scope);
        });
        elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_workflow_steps.default', function( $scope ) {
            pxl_swiper_handler($scope);
        });
    });

    let addClassActiveCustom = (element) => {
        if (element.hasClass('pxl-swiper-custom')) {
            let slides = element.find('.pxl-swiper-slide');
            let slideVisible = element.find('.swiper-slide-visible');
            let countSlidesVisible = slideVisible.length;
            let indexActive = (countSlidesVisible > 1) ? Math.ceil(countSlidesVisible/2) : countSlidesVisible;
            slides.removeClass('slide-active-custom')
            slideVisible.each(function(index) {
                if((index + 1) === indexActive) {
                    $(this).addClass('slide-active-custom');
                }
            })
        }
    }

    let swiperFilterChange = (swiper, $this, carousel_settings) => {
        let filterItems = $this.find('.pxl-swiper-filter .filter-item');
        if(filterItems.length <= 0) return;
        
        let swiperContainer = $this.find(".pxl-swiper-container")[0];
        let swiperWrapper = $this.find(".pxl-swiper-wrapper")[0];
        let slides = $this.find('.pxl-swiper-slide');
        filterItems.each(function (index, item) {
            $(item).on('click', function () {  
                filterItems.removeClass('active');
                $(item).addClass('active');
                let target = $(item).attr('data-filter').replace('.','');
                $(swiperWrapper).empty();
                slides.each(function (index, slide) {
                    if ($(slide).hasClass(target) || target === '*') {
                        let newSlide = $(slide).clone();
                        $(swiperWrapper).append(newSlide);
                    }
                });
                swiper.destroy();
                swiper = new Swiper(swiperContainer, carousel_settings);
            })    
        })
    }


    

    
    function pxl_swiper_handler($scope){
        $scope.find('.pxl-swiper-slider').each(function(index, element) {
            var $this = $(this);

            // let slides = $this.find('.pxl-swiper-slide');
            let navigation = {
                nextEl: $this.find('.pxl-swiper-arrow-next')[0],
                prevEl: $this.find('.pxl-swiper-arrow-prev')[0],
            };
            
            let elementorSection = $this.parents('.elementor-section').last();
            
            if (elementorSection.find('.pxl-navigation-carousel').length > 0) { 
                let navigationCopy = elementorSection.find('.pxl-navigation-carousel')[0];
                navigation = {
                    nextEl: $(navigationCopy).find('.pxl-arrow--next')[0],
                    prevEl: $(navigationCopy).find('.pxl-arrow--prev')[0],
                }
            } 
            
            var settings = $this.find(".pxl-swiper-container").data().settings;

            var carousel_settings = {
                direction: settings['slide_direction'],
                effect: settings['slide_mode'],
                wrapperClass : 'pxl-swiper-wrapper',
                slideClass: 'pxl-swiper-slide',
                slidesPerView: settings['slides_to_show'],
                slidesPerGroup: settings['slides_to_scroll'],
                slidesPerColumn: settings['slide_percolumn'],
                spaceBetween: 0,
                observer: true,
                observeParents: true,
                navigation: navigation,
                pagination : {
                    type: settings['pagination_type'],
                    el: $this.find('.pxl-swiper-dots')[0],
                    clickable : true,
                    modifierClass: 'pxl-swiper-pagination-',
                    bulletClass : 'pxl-swiper-pagination-bullet',
                    renderCustom: function (swiper, element, current, total) {
                        return current + ' of ' + total;
                    },
                    renderBullet: function (index, className) {
                        return '<span class="' + className + '"><span></span></span>';
                    }
                },
                speed: settings['speed'],
                watchSlidesProgress: true,
                watchSlidesVisibility: true,
                breakpoints: {
                    0 : {
                        slidesPerView: settings['slides_to_show_xs'],
                        slidesPerGroup: settings['slides_to_scroll'],
                    },
                    576 : {
                        slidesPerView: settings['slides_to_show_sm'],
                        slidesPerGroup: settings['slides_to_scroll'],
                    },
                    768 : {
                        slidesPerView: settings['slides_to_show_md'],
                        slidesPerGroup: settings['slides_to_scroll'],
                    },
                    992 : {
                        slidesPerView: settings['slides_to_show_lg'],
                        slidesPerGroup: settings['slides_to_scroll'],
                    },
                    1200 : {
                        slidesPerView: settings['slides_to_show_xl'],
                        slidesPerGroup: settings['slides_to_scroll'],
                    },
                    1400 : {
                        slidesPerView: settings['slides_to_show_xxl'],
                        slidesPerGroup: settings['slides_to_scroll'],
                    }
                },
                on: {

                    init : function (swiper){ 
                        addClassActiveCustom($this)
                        // if($this.hasClass('pxl-swiper-boxshadow')) {
                        //     slides.each(function(i, slide) {
                        //         if (!$(slide).hasClass('swiper-slide-visible')) {
                        //             $(slide).removeClass('wow'); 
                        //         }
                        //     });
                        // }
                    },
                    slideChangeTransitionStart : function (swiper){
                        var activeIndex = this.activeIndex;
                        $(this.slides).each(function(index){
                            if(index == activeIndex)
                                $(this).find('.wow').removeClass('pxl-invisible').addClass('animated');
                            else
                                $(this).find('.wow').removeClass('animated').addClass('pxl-invisible');
                        });
                    },
                    slideChange: function (swiper) { 
                        var activeIndex = this.activeIndex; 
                        $(this.slides).each(function(index){
                            if(index == activeIndex)
                                $(this).find('.wow').removeClass('pxl-invisible').addClass('animated');
                            else
                                $(this).find('.wow').removeClass('animated').addClass('pxl-invisible');
                        });
                        addClassActiveCustom($this)

                        $('.pxl-action-popup').magnificPopup({
                            type: 'iframe',
                            mainClass: 'mfp-fade',
                            removalDelay: 160,
                            preloader: false,
                            fixedContentPos: false
                        });
                    },
                    sliderMove: function (swiper) { 
                        var activeIndex = this.activeIndex; 
                        $(this.slides).each(function(index){
                            if(index == activeIndex)
                                $(this).find('.wow').removeClass('pxl-invisible').addClass('animated');
                            else
                                $(this).find('.wow').removeClass('animated').addClass('pxl-invisible');
                        });
 
                    },

                }
            };

            if(settings['center_slide'] || settings['center_slide'] == 'true')
                carousel_settings['centeredSlides'] = true;

            if(settings['loop'] || settings['loop'] === 'true'){
                carousel_settings['loop'] = true;
            }

            if(settings['autoplay'] || settings['autoplay'] === 'true'){
                carousel_settings['autoplay'] = {
                    delay : settings['delay'],
                    disableOnInteraction : settings['pause_on_interaction']
                };
            } else {
                carousel_settings['autoplay'] = false;
            }

            // Creative Effect
            if(settings['creative-effect'] === 'effect1'){
                carousel_settings['creativeEffect'] = {
                    prev: {
                        shadow: true,
                        origin: "left center",
                        translate: ["-5%", 0, -200],
                        rotate: [0, 100, 0],
                    },
                    next: {
                        origin: "right center",
                        translate: ["5%", 0, -200],
                        rotate: [0, -100, 0],
                    },
                };
            }

            if(settings['creative-effect'] === 'effect2'){
                carousel_settings['creativeEffect'] = {
                    prev: {
                        shadow: true,
                        translate: [0, 0, -400],
                    },
                    next: {
                        translate: ["100%", 0, 0],
                    },
                };
            }

            if(settings['creative-effect'] === 'effect3'){
                carousel_settings['creativeEffect'] = {
                    prev: {
                        opacity: 0,
                    },
                    next: {
                        opacity: 0,
                    },
                };
            }

            // Start Swiper Thumbnail
            if($this.find('.pxl-swiper-thumbs').length > 0) {
                var thumb_settings = $this.find('.pxl-swiper-thumbs').data().settings;
                var thumb_carousel_settings = {
                    effect: thumb_settings['slide_mode'],
                    direction: thumb_settings['slide_direction'],
                    spaceBetween: 0,
                    slidesPerView: thumb_settings['slides_to_show'],
                    centeredSlides: false,
                    loop: thumb_settings['loop'],  
                    watchSlidesProgress: true,
                    slideToClickedSlide: true,
                };  

                var slide_thumbs = new Swiper($this.find('.pxl-swiper-thumbs')[0], thumb_carousel_settings);
                carousel_settings['thumbs'] = { swiper: slide_thumbs };
            }
            // End Swiper Thumbnail

            if(settings['autoplay'] === 'true' && settings['pause_on_hover'] === 'true'){
                $( $this.find('.pxl-swiper-container') ).on({
                    mouseenter: function mouseenter() {
                        this.swiper.autoplay.stop();
                    },
                    mouseleave: function mouseleave() {
                        this.swiper.autoplay.start();
                    }
                });
            }

            var swiper = new Swiper($this.find(".pxl-swiper-container")[0], carousel_settings);
            swiperFilterChange(swiper, $this, carousel_settings);


        });  

    };
} )( jQuery );