<template>
  
  <!--if (strpos($video, "{") !== false) {-->
  <!--$video = json_decode($video);-->
  <!--$video_url = $video->url;-->
  <!---->
  <!--$video_element = WHAT IS BEING USED BELOW-->                    <!-- Keeping this just in case -->
  
  <!--} else {-->
  <!--$video_element =-->
  <!--<video v-if="properties['Background Video'].value" playsinline autoplay $loop muted>-->
  <!--<source :src="properties['Background Video'].value" type="video/mp4">-->
  <!--</video>-->
  <!--}-->
  
  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    
    <div v-if="videoUrl()" class="video-container">
      <video playsinline autoplay loop muted>
        <source :src="videoUrl()" type="video/mp4">
      </video>
    </div>
    
    <div class="hero">
      <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>
      <a class="button" :href="properties['URL'].value"
         v-if="properties['URL'].value && properties['Button Text'].value">
        {{properties['Button Text'].value}}
      </a>
    </div>
  
  </div>

</template>

<script>
  export default {
    name: "BuildableHero",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      return JSON.parse(this.componentData);
    },
    methods: {
      videoUrl() {
        let video = this.properties['Background Video'].value;
        if (!video) {
          return false;
        } else {
          if (video instanceof Object) {
            return video.url;
          } else {
            return video;
          }
        }
      }
    },
    mounted() {

      jQuery("#header + .page-content > .group-1 .hero-row").first().waypoint({
        handler: function (direction) {
          jQuery(this.element).find(".hero").addClass("animated fadeInUp").css("visibility", "visible");
        },
        offset: "100%"
      });

      jQuery(".hero-row").waypoint({
        handler: function (direction) {
          jQuery(this.element).find(".hero").addClass("animated fadeInUp").css("visibility", "visible");
        },
        offset: "75%"
      });
    }
  }
</script>

<style scoped>

</style>