<template>
  
  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    <div class="logo_promo_slider">
      <h1 class="title" :class="{ 'animated fadeIn': !!waypointTriggered }" v-html="properties['Title'].value" v-if="properties['Title'].value"></h1>
      <p class="paragraph" :class="{ 'animated fadeIn': !!waypointTriggered }" v-html="properties['Paragraph Text'].value" v-if="properties['Paragraph Text'].value"></p>
      
      <div class="logos-container" :class="'logos-' + properties['Images & URLs'].length">
        <span class="icon-container previous" @click="firstShowing = firstShowing - delta" v-if="properties['Images & URLs'].length > delta && firstShowing > 0">
          <i class="far fa-chevron-left"></i>
        </span>
        
        <div class="logo" :class="{ 'animated fadeInRight': !!waypointTriggered }" v-for="(set, i) in properties['Images & URLs']" v-if="i >= firstShowing && i < (firstShowing + delta)">
          <a class="image-container" :href="set['URL'].value" v-if="!!set['URL'].value && !!set['Image'].value">
            <img :src="set['Image'].value.url" />
          </a>
          <span class="image-container" v-else-if="!!set['Image'].value">
            <img :src="set['Image'].value.url" />
          </span>
        </div>
        
  
        <span class="icon-container next" @click="firstShowing = firstShowing + delta" v-if="properties['Images & URLs'].length > delta && lastShowing < properties['Images & URLs'].length - 1">
          <i class="far fa-chevron-right"></i>
        </span>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: "BuildableLogoPromoSlider",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      let hardCodedData = {
        firstShowing: 0,
        delta: (jQuery(window).width() >= 1024) ? 4 : ((jQuery(window).width() >= 800) ? 3 : 1),
        waypointTriggered: false
      };
      let componentData = JSON.parse(this.componentData);
      return {...hardCodedData, ...componentData};
    },
    mounted() {
      const self = this;

      let waypoint = new Waypoint({
        element: this.$el,
        handler: function() {
          self.waypointTriggered = true;
        },
        offset: "75%"
      });
      
      jQuery(window).on("load resize", this.handleResize);
    },
    beforeDestroy() {
      jQuery(window).off("load resize", this.handleResize);
    },
    computed: {
      lastShowing() {
        if (this.firstShowing + this.delta < this.properties['Images & URLs'].length) {
          return this.firstShowing + this.delta - 1;
        }
        else {
          return this.properties['Images & URLs'].length - 1;
        }
      }
    },
    methods: {
      handleResize() {
        this.delta = (jQuery(window).width() >= 1024) ? 4 : ((jQuery(window).width() >= 800) ? 3 : 1);
      }
    }
  }
</script>

<style scoped>

</style>