/**
 * Created by Pascal on 06/12/17.
 */

/* Example

const headerImageSliderSetting = new SliderSetting({
    sliderId: 'header-image-slider',
    slideQuery: '#header-image-slider .placeholder figure',
    dots: '#header-image-slider .slider-navigation-labels .navigation span',
    captions: '#header-image-slider .slider-navigation-labels .caption p',
    autoSlider: true,
    sliderInterval: 4000
});
headerImageSliderSetting = headerImageSliderSetting.prepareParameters();

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

 */


let imageSliders = [];

const imageSliderContainers = document.querySelectorAll('.image-slider');
const imageSliderContainersLength = imageSliderContainers.length;

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

    const imageSlider = imageSliderContainers[i];
    const imageSliderId = imageSlider.getAttribute('id');

    if(imageSliderId !== null){

        const imageSliderSetting = new SliderSetting({
            sliderId: imageSliderId,
            slideQuery: '#' + imageSliderId +' .placeholder figure',
            navigationButtons: '#' + imageSliderId +' .placeholder .controllers .nav-item' ,
            autoSlider: true,
            sliderInterval: 4000
        });

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


function SliderSetting(settingsObject) {

    const self = this;

    this.sliderId = '';
    this.definedPreviousNext = true;
    this.autoSlider = false;
    this.sliderInterval = 4000;
    this.navigationButtons = '';
    this.dots = '';
    this.captions = '';
    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.setDots = function (string) {
        this.dots = string;
        return this;
    };
    this.setCaptions = function (string) {
        this.captions = 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.getDots = function () {
        return this.dots;
    };
    this.getCaptions = function () {
        return this.captions;
    };


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

        return {
            sliderId: self.getSliderId(),
            definedPreviousNext: self.getDefinedPreviousNext(),
            autoSlider: self.getAutoSlider(),
            sliderInterval: self.getSliderInterval(),
            navigationButtons: self.getNavigationButtons(),
            dots: self.getDots(),
            captions: self.getCaptions(),
            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,
        dots: self.setDots,
        captions: self.setCaptions,
        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.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);
                });
            }

        }

        if (this.settings.dots !== '') {
            // Click interaction
            const dots = document.querySelectorAll(this.settings.dots);
            const dotsLength = dots.length;
            // console.log(this.settings.dots);
            // console.log(dots);
            for(let i = 0; i < dotsLength; i++){
                const dot = dots[i];
                // console.log('hier');
                dot.addEventListener('click', function () {
                    self.clickDot(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];

            // 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('active');
            else slide.classList.add('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');
            }
        }

        if (self.settings.dots !== '') { self.setActiveDot(); }
        if (self.settings.captions !== '') { self.setActiveCaption(); }
    };

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

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

    this.clickDot = function (clickedDot) {
        self.activeSlideId = parseInt(clickedDot.getAttribute('data-order'));
        self.setSlide();
        self.resetAutoSlider();
    };

    this.setActiveDot = function () {

        const dots = document.querySelectorAll(this.settings.dots);
        const dotsLength = dots.length;
        for(let i = 0; i < dotsLength; i++){
            const dot = dots[i];
            dotOrder = parseInt(dot.getAttribute('data-order'));

            if(dotOrder !== self.activeSlideId) dot.classList.remove('active');
            else dot.classList.add('active');
        }
    };

    this.setActiveCaption = function () {

        const captions = document.querySelectorAll(this.settings.captions);
        const captionsLength = captions.length;
        for(let i = 0; i < captionsLength; i++){
            const caption = captions[i];
            captionOrder = parseInt(caption.getAttribute('data-order'));

            if(captionOrder !== self.activeSlideId) caption.classList.remove('active');
            else caption.classList.add('active');
        }
    };
}