<template>
  
  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    <div class="complex_button" :class="{'no-image' : !properties['Image'].value}" :style="styling">
      
      <div class="content">
        <div class="icon-container" v-if="!!properties['Icon'].value"><i :class="properties['Icon'].value" aria-hidden="true"></i></div>
        <h1 :class="{ 'animated fadeIn': !!waypointTriggered }" class="title" v-html="properties['Title'].value" v-if="properties['Title'].value"></h1>
        <h3 class="subtitle" :class="{ 'animated fadeIn': !!waypointTriggered }" v-html="properties['Subtitle'].value" v-if="properties['Subtitle'].value"></h3>
        <p class="paragraph" :class="{ 'animated fadeIn': !!waypointTriggered }" v-html="properties['Paragraph Text'].value" v-if="properties['Paragraph Text'].value"></p>
        
        <div class="buttons-container" v-if="buttonOneExists() && buttonTwoExists()">
          <a class="button" :class="{ 'animated fadeIn': !!waypointTriggered }" :href="properties['URL 1'].value" v-if="buttonOneExists()">
            {{properties['Button Text 1'].value}}
          </a>
          <a class="button second-button" :class="{ 'animated fadeIn': !!waypointTriggered }" :href="properties['URL 2'].value" v-if="buttonTwoExists()">
            {{properties['Button Text 2'].value}}
          </a>
        </div>
        
        <a class="button" :class="{ 'animated fadeIn': !!waypointTriggered }" :href="properties['URL 1'].value" v-if="buttonOneExists() && !buttonTwoExists()">
          {{properties['Button Text 1'].value}}
        </a>
        <a class="button second-button" :class="{ 'animated fadeIn': !!waypointTriggered }"
           :href="properties['URL 2'].value" v-if="buttonTwoExists() && !buttonOneExists()">
          {{properties['Button Text 2'].value}}
        </a>
      
      </div>
      
      <div class="image-container" v-if="properties['Image'].value">
        <img :src="properties['Image'].value.url">
      </div>
    
    </div>
  </div>

</template>

<script>
  export default {
    name: "BuildableComplexButton",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      let hardCodedData = {
        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%"
      });
    },
    methods: {
      styling: function () {
        let hasBackgroundImage = (this.properties['Image'] && this.properties['Image'].value);
        return hasBackgroundImage ? 'background-image: url(' + this.properties['Image'].value.url + ')' : '';
      },
      buttonOneExists: function () {
        return this.properties['URL 1'].value && this.properties['Button Text 1'].value
      },
      buttonTwoExists: function () {
        return this.properties['URL 2'].value && this.properties['Button Text 2'].value
      }
    }
  }
</script>

<style scoped>

</style>
