<template>

  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    <div class="fixed_image_scrolling">
      <div class="content" :class="{ 'animated fadeIn': !!waypointTriggered }">
        <h1 class="title" v-html="properties['Title'].value" v-if="properties['Title'].value"></h1>
        <h4 class="subtitle" v-html="properties['Subtitle'].value" v-if="properties['Subtitle'].value"></h4>
        <p class="paragraph" v-html="properties['Paragraph Text'].value" v-if="properties['Paragraph Text'].value"></p>
      </div>
      <div class="descriptions-images" :class="'image-' + properties['Image Alignment'].value.toLowerCase()">
        <div class="fixed-image-container">
          <div class="container" :class="{ sticky: !!sticky }" :style="dynamicStyle">
            <div class="wrapper-container">
              <img class="wrapper" :src="properties['Image Wrapper'].value.url" />
            </div>
            <div class="images-container">
              <div class="relative-container">
                <div class="absolute-container">
                  <img :src="set['Image'].value.url" v-for="set in properties['Images & Descriptions']" :style="imagesStyle" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="titles-descriptions-container" :class="{ 'animated fadeIn': !!waypointTriggered }">
          <div class="title-description-container" :class="'description-' + (i+1)" :data-index="i" v-for="(set, i) in properties['Images & Descriptions']">
            <div class="title-description">
              <h3 class="title" v-html="set['Title'].value"></h3>
              <p v-html="set['Description'].value"></p>
            </div>
          </div>
        </div>
      </div>
      <div class="mobile-descriptions-images">
        <div class="descriptions-images">
          <div class="description-image" v-for="set in properties['Images & Descriptions']">
            <div class="image">
              <div class="container">
                <div class="wrapper-container">
                  <img :src="properties['Image Wrapper'].value.url" />
                </div>
                <div class="image-container">
                  <img :src="set['Image'].value.url" />
                </div>
              </div>
            </div>
            <div class="description">
              <h3 class="title" v-html="set['Title'].value"></h3>
              <p v-html="set['Description'].value"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: "BuildableFixedImageScrolling",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      let hardCodedData = {
        sticky: false,
        absoluteBottom: false,
        imagesStyle: "",
        dynamicStyle: "",
        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(".fixed_image_scrolling > .descriptions-images").waypoint({
        handler: function(direction) {
          self.sticky = direction === "down";
        },
        offset: "0"
      });

      jQuery(".fixed_image_scrolling .descriptions-images .titles-descriptions-container .title-description-container").waypoint({
        handler: function(direction) {
          let percentage = 0;

          if (direction === "down") {
            percentage = -100 * jQuery(this.element).data("index");
          }
          else {
            percentage = -100 * (jQuery(this.element).data("index")-1);
          }

          self.imagesStyle = "top: " + percentage + "%;";
        },
        offset: "50%"
      });
    }
  }
</script>

<style scoped>

</style>
