/* ==========================================================================
    Steps Sliders Handler
 ========================================================================== */

let stepsSliders = [];

const stepsSliderContainers = document.querySelectorAll('.steps-slider');
const stepsSliderContainersLength = stepsSliderContainers.length;

for (let i = 0; i < stepsSliderContainersLength; i++) {

    const stepsSlider = stepsSliderContainers[i];
    const stepsSliderId = stepsSlider.getAttribute('id');

    if (stepsSliderId !== null) {

        const stepsSliderSetting = {
            sliderId: stepsSliderId,
            navItemsQuery: '#' + stepsSliderId + ' .slider-nav .slide-nav-item',
            slidesQuery: '#' + stepsSliderId + ' .slides .slide',
            previousButton: '#' + stepsSliderId + ' .slides .navigation-buttons .previous',
            nextButton: '#' + stepsSliderId + ' .slides .navigation-buttons .next',
        };

        stepsSliders.push(new StepsSlider(stepsSliderSetting).init());
    }
    else console.log('A steps slider has no id...');
}

function StepsSlider(settings) {

    const self = this;
    this.slider = null;
    this.navItems = [];
    this.activeSlideId = 0;
    this.slides = [];
    this.autoSliderInterval = null;
    this.autoSliderIntervalDuration = 4000;

    this.nextButton = null;
    this.previousButton = null;


    this.init = function () {

        //Assign needed elements and calculations
        this.slider = document.querySelectorAll(settings.sliderId);
        this.slides = document.querySelectorAll(settings.slidesQuery);
        this.nextButton = document.querySelector(settings.nextButton);
        this.previousButton = document.querySelector(settings.previousButton);
        this.navItems = document.querySelectorAll(settings.navItemsQuery);
        this.activeSlideId = 0;

        // Set active slide (and possible previous and next classes)
        this.setSlide();

        const navItemsLength = self.navItems.length;
        for (let i = 0; i < navItemsLength; i++) {
            const navItem = self.navItems[i];
            navItem.addEventListener('click', function () {
                self.clickNavigationButton(this);
            });
        }

        if(isset(self.nextButton)){
            self.nextButton.addEventListener('click', function (){
                self.nextSlide();
                if (self.autoSliderInterval !== null) clearInterval(self.autoSliderInterval);
            });
        }
        if(isset(self.previousButton)){
            self.previousButton.addEventListener('click', function (){
                self.previousSlide();
                if (self.autoSliderInterval !== null) clearInterval(self.autoSliderInterval);
            });
        }

        this.autoSlider();
    };

    this.setSlide = function () {

        // Loop through the form elements
        const slidesLength = self.slides.length;

        for (let i = 0; i < slidesLength; i++) {
            const slide = self.slides[i];

            // Convert dataset attribute to desired type
            const slideOrder = parseInt(slide.dataset.order);

            // Remove and set active for all slides
            if (slideOrder !== self.activeSlideId) slide.classList.remove('active');
            else slide.classList.add('active');
        }

        // Loop through the form elements
        const navItemsLength = self.navItems.length;
        for (let i = 0; i < navItemsLength; i++) {
            const navItem = self.navItems[i];

            // Convert dataset attribute to desired type
            const navItemOrder = parseInt(navItem.dataset.order);

            // Remove and set active for all slides
            if (navItemOrder !== self.activeSlideId) navItem.classList.remove('active');
            else navItem.classList.add('active');
        }

    };

    this.autoSlider = function () {

        if (self.autoSliderInterval !== null) clearInterval(self.autoSliderInterval);

        self.autoSliderInterval = setInterval(function () {
                self.nextSlide();
                self.setSlide();
            }, self.autoSliderIntervalDuration
        );
    };

    this.resetAutoSlider = self.autoSlider;

    this.clickNavigationButton = function (navItem) {
        self.activeSlideId = parseInt(navItem.dataset.order);
        if (self.autoSliderInterval !== null) clearInterval(self.autoSliderInterval);
        self.setSlide();
    };

    this.nextSlide = function () {
        self.activeSlideId++;
        if (self.activeSlideId >= self.slides.length) self.activeSlideId = 0;

        self.setSlide();
    };

    this.previousSlide = function () {
        self.activeSlideId--;
        if (self.activeSlideId < 0) self.activeSlideId = self.slides.length - 1;

        self.setSlide();
    };

}