/* ==========================================================================
    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',
        };

        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.init = function () {

        //Assign needed elements and calculations
        this.slider = document.querySelectorAll(settings.sliderId);
        this.slides = document.querySelectorAll(settings.slidesQuery);
        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);
            });
        }
    };

    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.clickNavigationButton = function (navItem) {
        self.activeSlideId = parseInt(navItem.dataset.order);
        self.setSlide();
    };

}