(function($, document, window, viewport) {
    'use strict';

    // PLUGIN CLASS
    // ============
    const SliderPluginClass = {
        /**
         * @this {PluginBase & SliderPluginClass}
         * @param {HTMLElement} element
         * @param {Object} options
         */
         init: function(element, options) {
            $(window).on('load', function(e) {
                this.$el.not('.slick-initialized').slick(this.$el.data('slick')).addClass('et-slider');
            }.bind(this));

            // register slider timers for main sliders
            let $mainSliders = $('.et-main-slider');
            $mainSliders.on('autoChange.et', function (event, slick, interval) {
                let $slider = slick.$slider;
                let id = $slider.data('slider-id');

                let $progressbar = $('#et-slider-timer-' + id + ' .progress-bar');
                if($progressbar.length) {
                    $progressbar.stop();
                    $progressbar.css({width: '0', opacity: '1'});
                    $progressbar.animate({width: '100%'}, interval, 'linear');
                }
            });
            $mainSliders.on('autoClear.et', function (event, slick, interval) {
                let $slider = slick.$slider;
                let id = $slider.data('slider-id');
                let $progressbar = $('#et-slider-timer-' + id + ' .progress-bar');
                if($progressbar.length) {
                    $progressbar.stop().animate({opacity: 0}, 250);
                }
            });
        },

        /**
         * Only gets called after reinitializing the plugin
         * @this {PluginBase & SliderPluginClass}
         */
        reinit: function() {
            this.$el.not('.slick-initialized').slick(this.$el.data('slick')).addClass('et-slider');
        }
    };

    // REGISTER AND ADD THE PLUGIN
    // ===========================
    if (!window.easytemplate && !window.easytemplate.PluginManager) {
        throw Error('Cannot initialize Easytemplate Plugin. plugin-manager.js has to be loaded first!');
    }

    /** @type {PluginManager} manager */
    const manager = window.easytemplate.PluginManager;
    manager.addPlugin('[data-slick]', SliderPluginClass, 'etSliderPlugin');

    // Reinit Plugin after an article variation has been loaded or a pushed success notification is displayed, they may need to show sliders
    $(document).on('article-variation-loaded.et notification-modal-shown.et evo:loaded.evo.content', function() {
        manager.reinitialize('etSliderPlugin');
    });
})(jQuery, document, window, ResponsiveBootstrapToolkit);