<template>
  
  <div :id="rowId" :class="allRowClasses" :style="allBackgroundImageStyles">
    <div class="card">
      
      <!-- Image Element based on existence of URL -->
      <a :href="properties['URL'].value" v-if="properties['Image'].value && properties['URL'].value">
        <div class="image-container">
          <div class="image" :style="componentBackgroundStyle()"></div>
        </div>
      </a>
      <div class="image-container" v-else="properties['Image'].value">
        <div class="image" :style="componentBackgroundStyle()"></div>
      </div>
      
      <div class="card-content" :class="{'center-text': properties['Center Text'].value}">
        
        <!-- Title Element based on existence of URL -->
        <a :href="properties['URL'].value" v-if="properties['URL'].value && properties['Title'].value">
          <h3 class="title" v-html="properties['Title'].value"></h3>
        </a>
        <h1 class="title" v-html="properties['Title'].value" v-else="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>
        
        <a :href="properties['URL'].value"
           class="link-label" v-if="properties['URL'].value && properties['Link Label Text'].value">
          <span v-html="properties['Link Label Text'].value"></span>
        </a>
      </div>
    
    </div>
  </div>

</template>

<script>
  export default {
    name: "BuildableCard",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      let hardCodedData = {
        rowInGroup: undefined,
        waypointTriggered: false
      };
      let componentData = JSON.parse(this.componentData);
      return {...hardCodedData, ...componentData};
    },
    mounted() {
      const self = this;
      
      const elementIndex = [...this.$el.parentNode.children].indexOf(this.$el);
      this.rowInGroup = Math.floor(elementIndex / 3);
      
      let waypoint = new Waypoint({
        element: this.$el.parentElement,
        handler: function() {
          self.waypointTriggered = true;
        },
        offset: "75%"
      });
    },
    computed: {
      allRowClasses() {
        return (!!this.waypointTriggered && window.innerWidth >= 1024) ? this.rowClasses + " animated fadeInUp" : this.rowClasses;
      },
      allBackgroundImageStyles() {
        return (!!this.rowInGroup) ? this.backgroundImageStyle + '; animation-delay: ' + this.rowInGroup * 300 + 'ms' : this.backgroundImageStyle;
      }
    },
    methods: {
      componentBackgroundStyle: function () {
        return this.properties['Image'].value ? `background-image: url('${this.properties['Image'].value.url}');` : '';
      }
    }
  }
</script>

<style scoped>

</style>