/* Example

const headerImageSliderSetting = new SliderProjectorSetting({
    sliderProjectorId: '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 SliderProjector(headerImageSliderSetting).init();

 */

require('hammerjs');

const ClientReviewsHandler = {

  init: function () {
      let clientReviews = [];

      const clientReviewContainers = document.querySelectorAll('.js-client-reviews');
      const clientReviewContainersLength = clientReviewContainers.length;

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

          const clientReview = clientReviewContainers[i];
          const clientReviewId = clientReview.getAttribute('id');

          if(clientReviewId !== null){

              clientReviews.push( new ClientReview( {
                  clientReviewId: clientReviewId,
                  slideQuery: '#' + clientReviewId +' .js-client-review-slide',
                  navigationButtons: '#' + clientReviewId +' .js-client-reviews-button' ,
              } ).init());
          }
          else console.log('An image slider has no id...');
      }
  }
};

ClientReviewsHandler.init();

function ClientReview(settings) {

    //Define SliderProjector object
    const self = this;
    this.clientReviewObject = '';

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

    this.settings = {};

    this.init = function () {

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

        //Assign needed elements and calculations
        this.clientReviewObject = document.getElementById(this.settings.clientReviewId);
        this.slides = document.querySelectorAll(this.settings.slideQuery);
        this.availableSlides = this.slides.length;
        this.activeSlideId = 0;

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

        // Swipe interaction
        const swipeGestures = new Hammer(this.clientReviewObject);
        swipeGestures.on('swipeleft', function () {
            self.nextSlide();
            self.setSlide();
        });
        swipeGestures.on('swiperight', function () {
            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);
                });
            }

        }
    };


    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('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');
            }
        }
    };

    this.clickNavigationButton = function (navButton) {
        self.activeSlideId = parseInt(navButton.getAttribute('data-order'));
        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);
    };
}