<template>
  
  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    <div class="testimonial_slider" :class="{ 'animated fadeIn': !!waypointTriggered }">
      
      <div class="testimonials-container">
        <transition enter-active-class="animated fadeIn" leave-active-class="fadeOut" v-for="(quote, index) in properties['Quotes']" :key="index">
          <div class="testimonial-container" v-if="isActiveQuote(index)">
            <div class="image-container">
              <div class="image">
                <img :src="quote['Image'].value.url" v-if="quote['Image'].value">
              </div>
            </div>
            <div class="quote-container">
              <div class="quote"
                   :class="{'long-quote': quote['Quote'].value.length > 100}">
                <div class="container">
                  <div class="top" v-if="quote['Quote'].value">
                    <div class="q" v-html="quoteText(quote['Quote'].value)"></div>
                  </div>
                  <br>
                  <div class="bottom" v-if="quote['Name / Source'].value || quote['Reference'].value">
                    <span class="dash">&mdash; &nbsp;</span>
                    <span class="name" v-if="quote['Name / Source'].value && quote['Reference'].value">{{quote['Name / Source'].value}}, &nbsp;</span><span
                      class="reference">{{quote['Reference'].value}}</span>
                    <span class="name" v-if="quote['Name / Source'].value && !quote['Reference'].value">{{quote['Name / Source'].value}}</span>
                    <span class="reference" v-if="!quote['Name / Source'].value && quote['Reference'].value">{{quote['Reference'].value}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
      
      <div @click="previous()" class="icon-container backward">
        <i class="fa fa-angle-left"></i>
      </div>
      
      <div @click="next()" class="icon-container forward">
        <i class="fa fa-angle-right"></i>
      </div>
      
      <div class="slider-bullets">
        <span v-for="(quote, index) in properties['Quotes']" class="bullet" :class="{'selected': index === quoteIndex}">•</span>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: "BuildableTestimonialSlider",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      let hardCodedData = {
        quoteIndex: 0,
        intervalId: null,
        waypointTriggered: false
      };
      let componentData = JSON.parse(this.componentData);
      return {...hardCodedData, ...componentData};
    },
    mounted() {
      const self = this;
      this.setInterval();

      let waypoint = new Waypoint({
        element: this.$el,
        handler: function() {
          self.waypointTriggered = true;
        },
        offset: "75%"
      });
    },
    methods: {
      quoteText(quote) {
        return '"' + quote + '"';
      },
      isActiveQuote(index) {
        return index === this.quoteIndex;
      },
      next() {
        this.quoteIndex = (this.quoteIndex < this.properties['Quotes'].length - 1) ? ++this.quoteIndex : 0;
        this.setInterval();
      },
      previous() {
        this.quoteIndex = (this.quoteIndex > 0) ? --this.quoteIndex : this.properties['Quotes'].length - 1;
        this.setInterval();
      },
      setInterval() {
        clearInterval(this.intervalId);
        this.intervalId = setInterval(() => {
          this.next();
        }, 15000);
      }
    }
  }
</script>

<style scoped>

</style>