/* Example

const headerImageSliderSetting = new SliderProjectorSetting({
    sliderProjectorId: 'header-image-slider',
    slideQuery: '#header-image-slider .placeholder figure',
    autoSlider: true,
    sliderInterval: 4000
});
headerImageSliderSetting = headerImageSliderSetting.prepareParameters();

const headerImageSlider = new SliderProjector(headerImageSliderSetting).init();

 */


let Sliders = [];

const sliderContainers = document.querySelectorAll('.js-slider');
const sliderContainersLength = sliderContainers.length;

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

    const slider = sliderContainers[i];
    const sliderId = slider.getAttribute('id');

    if(sliderId !== null){

        const Slidersetting = new SliderSetting({
            sliderId: sliderId,
            slideQuery: '#' + sliderId +' .js-slider-slide',
            navigationButtons: '#' + sliderId +' .js-slider-button',
            sliderCurrent: '#' + sliderId +' .js-slider-current-index',
            sliderMeterVal: '#' + sliderId +' .js-slider-meter-value',
        });

        Sliders.push( new Slider(Slidersetting.prepareParameters()).init() );
    }
    else console.log('An image slider has no id...');
}


function SliderSetting(settingsObject) {

    const self = this;

    this.sliderId = '';
    this.definedPreviousNext = true;
    this.autoSlider = true;
    this.sliderInterval = 4000;
    this.navigationButtons = '';
    this.sliderCurrent = '';
    this.sliderMeterVal = '';
    this.slideQuery = '';

    this.setSliderId = function (string) {
        this.sliderId = string;
        return this;
    };
    this.setDefinedPreviousNext = function (boolean) {
        this.definedPreviousNext = boolean;
        return this;
    };
    this.setAutoSlider = function (boolean) {
        this.autoSlider = boolean;
        return this;
    };
    this.setSliderInterval = function (integer) {
        this.sliderInterval = integer;
        return this;
    };
    this.setSlideQuery = function (string) {
        this.slideQuery = string;
        return this;
    };
    this.setNavigationButtons = function (string) {
        this.navigationButtons = string;
        return this;
    };
    this.setSliderCurrent = function (string) {
        this.sliderCurrent = string;
        return this;
    };
    this.setSliderMeterVal = function (string) {
        this.sliderCurrent = string;
        return this;
    };
    this.getSliderId = function () {
        return this.sliderId;
    };
    this.getDefinedPreviousNext = function () {
        return this.definedPreviousNext;
    };
    this.getAutoSlider = function () {
        return this.autoSlider;
    };
    this.getSliderInterval = function () {
        return this.sliderInterval;
    };
    this.getSlideQuery = function () {
        return this.slideQuery;
    };
    this.getNavigationButtons = function () {
        return this.navigationButtons;
    };
    this.getSliderCurrent = function () {
        return this.sliderCurrent;
    };
    this.getSliderMeterVal = function () {
        return this.sliderMeterVal;
    };

    // Invert setters to getters
    this.prepareParameters = function () {

        return {
            sliderId: self.getSliderId(),
            definedPreviousNext: self.getDefinedPreviousNext(),
            autoSlider: self.getAutoSlider(),
            sliderInterval: self.getSliderInterval(),
            navigationButtons: self.getNavigationButtons(),
            sliderCurrent: self.getSliderCurrent(),
            sliderMeterVal: self.getSliderMeterVal(),
            slideQuery: self.getSlideQuery()
        }

    };

    // Mass assign settings
    this.fill = function () {
        // Object.keys(settingsObject).forEach(function (key) {
        //     self[key] = settingsObject[key];
        // });

        const settingsObjectKeys = Object.keys(settingsObject);
        const settingsObjectLength = settingsObjectKeys.length;

        for(let i = 0; i < settingsObjectLength; i++){
            const key = settingsObjectKeys[i];
            self[key] = settingsObject[key];
        }

    };

    this.fill();

    return {
        sliderId: self.setSliderId,
        definedPreviousNext: self.setDefinedPreviousNext,
        autoSlider: self.setAutoSlider,
        sliderInterval: self.setSliderInterval,
        navigationButtons: self.setNavigationButtons,
        sliderCurrent: self.setSliderCurrent,
        sliderMeterVal: self.setSliderMeterVal,
        slideQuery: self.setSlideQuery,
        prepareParameters: self.prepareParameters
    };
}

function Slider(settings) {
    //Define Slider object
    const self = this;
    this.sliderObject = '';

    //SlideParameters
    this.activeSlideId = 0;
    this.previousSlideId = 0;
    this.nextSlideId = 0;
    this.availableSlides = 1;
    this.slides = [];
    this.autoSliderInterval = null;

    this.settings = {};

    this.init = function () {

        //Append settings to self
        this.settings = settings;

        //Assign needed elements and calculations
        this.sliderObject = document.getElementById(this.settings.sliderId);
        this.slides = document.querySelectorAll(this.settings.slideQuery);
        this.sliderCurrent = document.querySelectorAll(this.settings.sliderCurrent);
        this.sliderMeterVal = document.querySelectorAll(this.settings.sliderMeterVal);
        this.availableSlides = this.slides.length;
        this.activeSlideId = 0;

        //Define previous and next if we want to use those
        if (self.settings.definedPreviousNext) this.setPreviousAndNextSlide();

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

        // Swipe interaction
        const swipeGestures = new Hammer(this.sliderObject);
        swipeGestures.on('swipeleft', function () {
            self.resetAutoSlider();
            self.nextSlide();
            self.setSlide();
        });
        swipeGestures.on('swiperight', function () {
            self.resetAutoSlider();
            self.previousSlide();
            self.setSlide();
        });



        if (this.settings.navigationButtons !== '') {

            // Click interaction
            const navigationButtons = document.querySelectorAll(this.settings.navigationButtons);
            const navigationButtonsLength = navigationButtons.length;
            for(let i = 0; i < navigationButtonsLength; i++){
                const navigationButton = navigationButtons[i];
                navigationButton.addEventListener('click', function () {
                    self.clickNavigationButton(this);
                });
            }

        }

        self.autoSlider();
    };


    this.autoSlider = function (){

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

        if(this.settings.autoSlider && Number.isInteger(this.settings.sliderInterval) ){

            this.autoSliderInterval = setInterval(function() {
                    self.nextSlide();
                    self.setSlide();
                }, this.settings.sliderInterval
            );
        }
    };

    this.resetAutoSlider = self.autoSlider;


    this.nextSlide = function () {
        this.activeSlideId++;
        if (this.activeSlideId >= this.availableSlides) this.activeSlideId = 0;

        if (self.settings.definedPreviousNext) this.setPreviousAndNextSlide();
    };

    this.previousSlide = function () {
        this.activeSlideId--;
        if (this.activeSlideId < 0) this.activeSlideId = this.availableSlides - 1;

        if (self.settings.definedPreviousNext) this.setPreviousAndNextSlide();
    };

    this.setPreviousAndNextSlide = function () {
        this.nextSlideId = this.activeSlideId + 1;
        if (this.nextSlideId >= this.availableSlides) this.nextSlideId = 0;

        this.previousSlideId = this.activeSlideId - 1;
        if (this.previousSlideId < 0) this.previousSlideId = this.availableSlides - 1;
    };

    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];

            slide.style.pointerEvents = "none"; // Needed for swipe functionality

            // Convert data set attribute to desired type
            const slideOrder = parseInt(slide.getAttribute('data-order'));

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

            // If we use the previous and next, also set those classes
            if (self.settings.definedPreviousNext) {

                if (slideOrder !== self.previousSlideId) slide.classList.remove('previous');
                else slide.classList.add('previous');

                if (slideOrder !== self.nextSlideId) slide.classList.remove('next');
                else slide.classList.add('next');
            }
        }

        // Update meter value
        let meterVal = (this.activeSlideId + 1) / this.availableSlides;
        document.querySelector(self.settings.sliderMeterVal).style.transform = `scaleX(${meterVal})`;

        // Update current index
        document.querySelector(self.settings.sliderCurrent).innerHTML = this.activeSlideId + 1;

    };

    this.clickNavigationButton = function (navButton) {
        self.activeSlideId = parseInt(navButton.getAttribute('data-order'));
        if (self.settings.definedPreviousNext) self.setPreviousAndNextSlide();
        self.setSlide();

        // Next & previous
        const next = document.querySelector(self.settings.navigationButtons + '.next');
        const previous = document.querySelector(self.settings.navigationButtons + '.previous');

        next.setAttribute('data-order', self.nextSlideId);
        previous.setAttribute('data-order', self.previousSlideId);

        self.resetAutoSlider();

        // next.querySelector('p').innerHTML = self.slides[self.nextSlideId].dataset.name;
        // previous.querySelector('p').innerHTML = self.slides[self.previousSlideId].dataset.name;
    };
}