<template>
  
  <div :id="rowId" :class="allRowClasses()" :style="backgroundImageStyle">
    
    <div>
      <div class="reflexive_list" :class="{ 'hide-title-and-paragraph': properties['Hide Title & Paragraph'].value, 'animated fadeIn': !!waypointTriggered }">
        <div class="pane pane-1" :class="{ 'pane-hidden': !!hidePane1 }" v-if="!properties['Hide Title & Paragraph'].value">
          <div class="title-paragraph">
            <h1 class="title title-1" v-html="properties['Title'].value" v-if="properties['Title'].value"></h1>
            <p class="paragraph paragraph-1" v-html="properties['Paragraph Text'].value" v-if="properties['Paragraph Text'].value"></p>
          </div>
        </div>
        <div class="pane pane-2" :class="{'hide-title-and-paragraph': properties['Hide Title & Paragraph'].value}">
          <div class="list" v-if="properties['List Items']">
            <div class="list-item" :class="{ active: currentIndex === index }" @click="itemClicked(index, listItem['Component Class Name(s)'].value)" :data-index="index" :data-classes="listItem['Component Class Name(s)'].value" v-for="(listItem, index) in properties['List Items']">
              <div class="label">
                <div class="label-icons">
                  <h4>{{listItem['Label'].value}}</h4>
                  <div class="icons-container" v-if="properties['Hide Title & Paragraph'].value">
                    <div class="icon-container previous" @click.stop="previous()">
                      <i class="fa fa-angle-left"></i>
                    </div>
                    <div class="icon-container next" @click.stop="next()">
                      <i class="fa fa-angle-right"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="long-arrow" v-if="!properties['Hide Title & Paragraph'].value">
                <i class="far fa-long-arrow-right"></i>
              </div>
              <div class="angle-right" v-if="!properties['Hide Title & Paragraph'].value">
                <i class="far fa-angle-right"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="pane pane-3"
             :class="{ 'pane-hidden': !properties['Hide Title & Paragraph'].value && !hidePane1, 'hide-title-and-paragraph': properties['Hide Title & Paragraph'].value }">
          <div class="contents" v-if="properties['List Items']">
            <div class="content-item" :class="contentItemNumber(index)" v-for="(listItem, index) in properties['List Items']" v-if="currentIndex === index">
              <div v-html="listItem['Content'].value" class="content"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  
  </div>

</template>

<script>
  export default {
    name: "BuildableReflexiveList",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      let hardCodedData = {
        currentIndex: 0,
        hidePane1: false,
        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(".page-content .reflexive_list-group .reflexive_list-row").each(function (i, row) {
        jQuery(row).find(".list .list-item").each(function (i, item) {
          let classes = jQuery(this).data("classes");
          if (!!classes) {
            jQuery(".page-content " + classes).hide();
          }
        });
      });
    },
    methods: {
      allRowClasses() {
        let classes = this.rowClasses;
        classes += (this.properties['Hide Title & Paragraph'].value ? 'hide-title-and-paragraph' : '');
        return classes;
      },
      contentItemNumber(index) {
        return `content-item-${index}`;
      },
      itemClicked(index, classes) {
        this.currentIndex = index;
        this.hidePane1 = true;

        if (jQuery(window).width() < 800) {
          var target = jQuery(this).closest(".reflexive_list").find(".pane-3:not(.hide-title-and-paragraph) .contents .content-item-" + index);
          if (target.length !== 0) {
            jQuery('html, body').animate({
              scrollTop: target.offset().top
            }, 1000);
          }
        }
        
        // Hide the component(s) associated with the other list items
        this.properties['List Items'].forEach( function(item) {
          if (!!item['Component Class Name(s)'].value) {
            jQuery(".page-content " + item['Component Class Name(s)'].value).hide();
          }
        });
        
        // Show the component(s) associated with this list item
        jQuery(".page-content " + classes).show();

        // Reinitialize maps to make sure they appear properly once the element is displayed
        if (jQuery(".page-content " + classes).find(".school_locator").length) {
          initSchoolLocatorMap();
        }
        else if (jQuery(".page-content " + classes).find(".parish_locator").length) {
          initParishLocatorMap();
        }
      },
      previous() {
        let index = (this.currentIndex > 0) ? --this.currentIndex : this.properties['List Items'].length - 1;
        this.itemClicked(index);
      },
      next() {
        let index = (this.currentIndex < this.properties['List Items'].length - 1) ? ++this.currentIndex : 0;
        this.itemClicked(index);
      }
    }
  }
</script>

<style scoped>

</style>
