/**
 * Text Scroll js
 *
 * @package woostify
 */

(function ($) {

    'use strict';

    var TextScrollHandler = function ($scope, $) {

        var $flickityCarousel = $scope.find('.flickity-carousel');

        if ( $flickityCarousel.length > 0 ) {
            $flickityCarousel.css('display', 'block');
            // speed of ticker
            var tickerSetting = $flickityCarousel.attr('data-setting');
            var tickerAutoplay = $flickityCarousel.attr('data-autoplay');
            var tickerSpeed = $flickityCarousel.attr('data-speed');
            var flickity = null;
            var isPaused = false;
            var slideshowID = $flickityCarousel.attr('id');
            var slideshowClass = '.'+slideshowID;
            var rtl = $flickityCarousel.attr('data-rtl') == 'yes' ? true : false;
            // var slideshowEl = document.getElementById(slideshowID);
            var slideshowEl = document.querySelector(slideshowClass);
            var slideshowElItem = slideshowEl.querySelectorAll('.slider-item');
            let slideshowElItemLength = slideshowElItem.length;
            slideshowElItem.forEach(ele => {
                ele.style.minWidth = (100 / slideshowElItemLength) + '%';
            });

            // functions
            var dupliateItem = function dupliateItem(slider, index) {
                let itemToClone = slider.children[index];
                if( itemToClone != 'undefined' ){
                    let clone = itemToClone.cloneNode(true);
                    slider.appendChild(clone);
                    flickity.append(clone); // Update Flickity
                }

            }

            if ( tickerAutoplay == 'false' ) {
                tickerSpeed = 0;

            }
            var update = function update() {
                if (isPaused) return;
                if (flickity.slides) {
                    flickity.x = (flickity.x - tickerSpeed) % flickity.slideableWidth;
                    flickity.selectedIndex = flickity.dragEndRestingSelect();
                    flickity.updateSelectedSlide();
                    flickity.settle(flickity.x);
                }
                window.requestAnimationFrame(update);
            };
            var pause = function pause() {
                isPaused = true;
            };
            var play = function play() {
                if (isPaused) {
                    isPaused = false;
                    window.requestAnimationFrame(update);
                }
            };

            let options = {
                cellAlign: 'left',
                setGallerySize: true,
                dragThreshold: 25,
                pageDots: false,
                prevNextButtons: false,
                autoPlay: false,
                draggable: true,
                wrapAround: true,
                selectedAttraction: 0.015,
                friction: 0.25,
                rightToLeft: rtl
            }
            tickerSetting = JSON.parse(tickerSetting);
            let flickityOption = Object.assign(options, tickerSetting);

            // create flickity instance
            flickity = new Flickity(slideshowEl, flickityOption);

            flickity.x = 0;

            var slider = document.querySelector( slideshowClass + ' .flickity-slider');
            if( slider.children.length != 0 ){
                for (let index = 0; index < slideshowElItemLength; index++) {
                    dupliateItem(slider,index);
                }
            }

            // event listeners
            slideshowEl.addEventListener('mouseenter', pause, false);
            slideshowEl.addEventListener('focusin', pause, false);
            slideshowEl.addEventListener('mouseleave', play, false);
            slideshowEl.addEventListener('focusout', play, false);
            flickity.on('dragStart', function () {
                isPaused = true;
            });
            // start ticker
            update();

        }
    };

    var TextScrollSlideSlider = function($scope, $) {
        var $selector = $scope.find('.text-scroll-widget');
        var slideshowEl = $selector.find('.slick-slider');
        var swiperEl = $selector.find('.swiper-container');

        if ( swiperEl && swiperEl.length != 0 ) {

            let swiperId = swiperEl.attr('id');
            let swiperClass = '.' + swiperId;
            let swiperData = swiperEl.attr('data-swiper');
            swiperData = JSON.parse(swiperData);

            let options = {
                slidesPerView: 1,
                spaceBetween: 0,
                speed: 2000,
                autoplay: {
                  delay: 1000,
                  disableOnInteraction: false,
                },
                loop: true,
            };

            let swiperOption = Object.assign(options, swiperData);

            var swiperInit = new Swiper(swiperClass, swiperOption);

            var swiperButtonPrev = swiperEl.find('.swiper-button-prev');
            var swiperButtonNext = swiperEl.find('.swiper-button-next');

            if (swiperButtonPrev.length != 0 ) {
                swiperButtonPrev.on('click', function (e) {
                    swiperInit.slidePrev();
                });
            }

            if (swiperButtonNext.length != 0 ) {
                swiperButtonNext.on('click', function (e) {
                    swiperInit.slideNext();
                });
            }

            $(swiperClass).on('mouseenter', function(e){
              swiperInit.autoplay.stop();
            });
            $(swiperClass).on('mouseleave', function(e){
              swiperInit.autoplay.start();
            });

        }

    }

    $( window ).on(
		'elementor/frontend/init',
		function () {
			elementorFrontend.hooks.addAction( 'frontend/element_ready/woostify-text-scroll.default', TextScrollHandler ); // Deprecated.
			elementorFrontend.hooks.addAction( 'frontend/element_ready/woostify-text-scroll.text_slider', TextScrollSlideSlider ); // Deprecated.

        }
	);

    document.addEventListener('DOMContentLoaded', function () {

    });

})(jQuery);
