<template>
  <div class="info-box-container">
    
    <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
      
      <div v-if="videoUrl('Background Video')" class="video-container">
        <video playsinline autoplay loop muted class="background-video">
          <source :src="videoUrl('Background Video')" type="video/mp4">
        </video>
      </div>
      
      <div class="hero_with_info_box" :class="{ 'animated fadeInUp': !!waypointTriggered }">
        <h1 class="title" v-html="titleHtml()" v-if="properties['Title 1'].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 v-if="properties['Button Text'].value" class="button modal-button">
          {{properties['Button Text'].value}}
        </a>
        
        <div v-if="videoUrl('Modal Video')" class="modal-mask" hidden>
          <div class="modal-wrapper">
            <div class="modal">
              <div class="top-bar">
                <a class="close">
                  <i class="fas fa-times fa-2x"></i>
                </a>
              </div>
              <div class="content">
                <div class="video-container">
                  <video playsinline controls class="modal-video">
                    <source :src="videoUrl('Modal Video')" type="video/mp4">
                  </video>
                </div>
              </div>
            </div>
          </div>
        </div>
      
      </div>
    
    </div>
    
    <div class="info-box" @click="openInfoBoxUrl()">
      <div class="title-paragraph">
        <h6>{{properties['Info Box Title'].value}}</h6>
        <p>{{properties['Info Box Paragraph Text'].value}}</p>
        <div class="arrows">
          <div class="icon-container">
            <i class="fa fa-chevron-right arrow first next"></i>
            <i class="fa fa-chevron-right arrow second next"></i>
          </div>
        </div>
      </div>
      <img :src="properties['Info Box Image'].value.url" v-if="!!properties['Info Box Image'].value" />
    </div>
  
  </div>

</template>

<script>
  export default {
    name: "BuildableHeroWithInfoBox",
    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%"
      });

      jQuery('.modal-button').click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        jQuery("body").addClass("modal-open");
        jQuery(".video-container .background-video")[0].pause();
        jQuery(".video-container .modal-video")[0].play();
        jQuery(".hero_with_info_box .modal-mask").show().css('display', 'table');
        jQuery(".info-box-container .info-box").hide();
      });

      // arrow button things
      jQuery('.square').click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        jQuery('.arrow').toggleClass('bounceAlpha');
      });

      // closing the modal things
      jQuery(document).click(function (e) {
        if (!jQuery(e.target).is(".modal, .modal *")) {
          if (jQuery('.modal').is(':visible')) {
            jQuery("body").removeClass("modal-open");

            jQuery('.modal-mask').hide();
            jQuery(".video-container .modal-video")[0].pause();
            jQuery(".video-container .background-video")[0].play();
            jQuery(".info-box-container .info-box").show();
          }
        }
      });
      jQuery(".modal a.close").click(function (e) {
        e.preventDefault();
        jQuery("body").removeClass("modal-open");

        jQuery(this).closest(".modal-mask").hide();
        jQuery(".video-container .modal-video")[0].pause();
        jQuery(".video-container .background-video")[0].play();
        jQuery(".info-box-container .info-box").show();
      });
      jQuery("body").keyup(function (e) {
        if (jQuery('.modal').is(':visible')) {
          var index = jQuery(".modal:visible").find(".modal-image:visible").data("slide");
          if (e.keyCode == 27) {
            jQuery("body").removeClass("modal-open");
            
            jQuery(".modal-mask:visible").hide();
            jQuery(".video-container .modal-video")[0].pause();
            jQuery(".video-container .background-video")[0].play();
            jQuery(".info-box-container .info-box").show();
          }
        }
      });
    },
    methods: {
      titleHtml() {
        let html = this.properties['Title 1'].value;
        html += this.properties['Title 2'].value ? ' <span class="accent-text">' + this.properties['Title 2'].value + '</span>' : '';
        return html;
      },
      videoUrl(propertyName) {
        let video = this.properties[propertyName].value;
        if (!video) {
          return false;
        } else {
          if (video instanceof Object) {
            return video.url;
          } else {
            return video;
          }
        }
      },
      openInfoBoxUrl() {
        window.open(this.properties['Info Box URL'].value, '_blank');
      }
    }
  }
</script>

<style scoped>

</style>