jQuery(document).ready(function ($) {

    // Init slick in this Elementor Hook to make it work everywhere (popups etc)

    $( window ).on( 'elementor/frontend/init', function() {
        elementorFrontend.hooks.addAction( 'frontend/element_ready/section', function($scope, $){
            initSlider($scope);
        });
    } );


    $('.webien-column-slider').each(function(){
        let $el = $(this);
        initSlider($el);
    });


    function initSlider($el) {

        // Get options for this slider
        let attr = $el.attr('column-slider');

        if (typeof attr === 'undefined' || attr === false) {
            console.log('Nope.. return..');
            return;
        }

        let $container = $el;
        let $slider = $container.find('.elementor-row').first();
        let maxWidth = false;

        let settings = JSON.parse(attr);

        let dotIcon = $el.attr('column-slider-icon');

        settings.customPaging = function(slider, i) {
            return dotIcon;
        };

        //console.log(settings);

        if(settings.hasOwnProperty('viewports') && settings.viewports.length ){
            // Recursive to set max width
            if(settings.viewports.includes('mobile')){
                maxWidth = 768;
            }
            if(settings.viewports.includes('tablet')){
                maxWidth = 1140;
            }
            if(settings.viewports.includes('desktop')){
                maxWidth = 100000;
            }
        }

        // Keep object clean to slick properties
        delete settings.viewports;

        if(maxWidth && window.innerWidth < maxWidth){
            $slider.slick(settings);
        }
        

        // Attach resize listener
        $(window).resize(function(e){
            if(window.innerWidth < maxWidth) {
                if(!$slider.hasClass('slick-initialized')){
                    $container.addClass('slider-active');
                    $slider.slick(settings);
                }
            }else{
                if($slider.hasClass('slick-initialized')){
                    $slider.slick('unslick');
                    $container.removeClass('slider-active');
                }
            }
        });
    }

});
