(function ($) {
    'use strict';

    const SifencyDeviceSlider = function ($scope, $) {
        const $wrapper = $scope.find('.sifency-device-slider-wrapper');
        const $swiperContainer = $wrapper.find('.sifency-ds-swiper');

        if (!$swiperContainer.length) return;

        let settings = { autoplay: 'yes', speed: 3000, layout: 'fade', pause: 'yes' };
        try {
            const raw = $wrapper.data('ds-settings');
            if (raw) $.extend(settings, raw);
        } catch (e) {}

        const swiperOptions = {
            loop: true,
            speed: 800,
            effect: settings.layout === 'fade' ? 'fade' : 'slide',
            fadeEffect: { crossFade: true },
            autoplay: settings.autoplay === 'yes' ? {
                delay: settings.speed,
                disableOnInteraction: false,
                pauseOnMouseEnter: settings.pause === 'yes'
            } : false,
            navigation: {
                nextEl: $wrapper.find('.sifency-ds-next')[0],
                prevEl: $wrapper.find('.sifency-ds-prev')[0],
            },
            pagination: {
                el: $wrapper.find('.sifency-ds-pagination')[0],
                clickable: true,
            },
        };

        if (settings.layout === 'scroll') {
            swiperOptions.effect = 'fade';
            $wrapper.addClass('sifency-layout-scroll');
        }

        new Swiper($swiperContainer[0], swiperOptions);
    };

    $(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction('frontend/element_ready/sifency-device-slider.default', SifencyDeviceSlider);
    });

})(jQuery);