<template>

  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    <div class="guillotine_images">
      <div class="title-paragraph">
        <h1 class="title" v-html="properties['Title'].value" v-if="properties['Title'].value"></h1>
        <p class="paragraph" v-html="properties['Paragraph Text'].value" v-if="properties['Paragraph Text'].value"></p>
      </div>
      <div class="container guillotine-fade">
        <div class="image-container image-container-1">
          <!--<div class="overlay"></div>-->
          <div class="image" :style="`background-image: url('` + properties['Image 1'].value.url + `');`"></div>
        </div>
        <div class="guillotine">
          <div class="guillotine-left angle--top-left" :style="`background-image: url('` + properties['Consistent Image'].value.url + `');`"></div>
          <div class="guillotine-right angle--bottom-right" :style="`background-image: url('` + properties['Consistent Image'].value.url + `');`"></div>
          <div class="text-container text-container-1">
            <h3 class="subtitle subtitle-1" v-html="properties['Subtitle 1'].value"></h3>
            <p class="description description-1" v-html="properties['Description 1'].value"></p>
            <a class="button button-1" :href="properties['Button URL 1'].value" v-if="!!properties['Button Text 1'].value && !!properties['Button URL 1'].value">{{ properties['Button Text 1'].value }}</a>
          </div>
          <div class="text-container text-container-2">
            <h3 class="subtitle subtitle-2" v-html="properties['Subtitle 2'].value"></h3>
            <p class="description description-2" v-html="properties['Description 2'].value"></p>
            <a class="button button-2" :href="properties['Button URL 2'].value" v-if="!!properties['Button Text 2'].value && !!properties['Button URL 2'].value">{{ properties['Button Text 2'].value }}</a>
          </div>
        </div>
        <div class="image-container image-container-2">
          <div class="image" :style="`background-image: url('` + properties['Image 2'].value.url + `');`"></div>
        </div>
      </div>
      <div class="mobile-container">
        <div class="content content-1 angle--bottom-right">
          <div class="text-container text-container-1">
            <h5 class="subtitle subtitle-1" v-html="properties['Subtitle 1'].value"></h5>
            <p class="description description-1" v-html="properties['Description 1'].value"></p>
          </div>
        </div>
        <div class="content content-2 angle--top-left">
          <div class="text-container text-container-2">
            <h5 class="subtitle subtitle-2" v-html="properties['Subtitle 2'].value"></h5>
            <p class="description description-2" v-html="properties['Description 2'].value"></p>
          </div>
        </div>
        <div class="image-container">
          <img class="image" :src="properties['Mobile Image'].value.url" />
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  jQuery(window).scroll(() => {
      const scrollTop = jQuery(window).scrollTop();

      if (!!jQuery('.container.guillotine-fade')) {
          jQuery('.container.guillotine-fade').css({
              opacity: () => {
                  const top = jQuery('.guillotine_images .container').offset().top;
                  const height = jQuery('.guillotine_images .container').height();
                  const scrollTop = jQuery(window).scrollTop();

                  const p1 = top - 0.60 * height;
                  const p2 = top;
                  const p3 = top + 0.40 * height;
                  const p4 = top + 0.80 * height;


                  if (scrollTop < p2) {
                      // First
                      return (scrollTop - p1) / (p2 - p1);
                  } else if (scrollTop > p3) {
                      // Last
                      return 1 - (scrollTop - p3) / (p4 - p3);
                  } else {
                      // Second
                      return 1;
                  }
              }
          });
      }
  });

  export default {
    name: "BuildableGuillotineImages",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      return JSON.parse(this.componentData);
    },
    mounted() {
      jQuery(window).on("load resize", this.handleResize);
    },
    beforeDestroy() {
      jQuery(window).off("load resize", this.handleResize);
    },
    methods: {
      handleResize() {
        const body = jQuery("body");
        const leftGuillotine = jQuery(".guillotine_images .container .guillotine .guillotine-left");
        const rightGuillotine = jQuery(".guillotine_images .container .guillotine .guillotine-right");

        if (body.width() % 2 === 1) {
          leftGuillotine.width(leftGuillotine.width() + 1);
          rightGuillotine.width(rightGuillotine.width() + 1);
        }
        else {
          leftGuillotine.width(0.5 * body.width());
          rightGuillotine.width(0.5 * body.width());
        }
      }
    }
  }
</script>

<style scoped>

</style>
