<template>
  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    
    <div class="reflexive_image_list">
      <div class="title-container" :class="{ 'animated fadeIn': !!waypointTriggered }">
        <h1 class="title" v-html="titleText()"></h1>
      </div>
      <div class="panes-container">
        <div class="pane pane-1">
          <div class="list" v-if="properties['List Items']">
            <div v-for="(listItem, index) in properties['List Items']" class="list-item"
                 :class="{ 'selected': isSelected(index) && !!waypointTriggered, 'not-delayed': isSelected(index) && selectAfterInitialLoad }"
                 :data-index="index" @click="selectItem(index)">
              <div class="label">
                <h4>{{listItem['Label'].value}}</h4>
              </div>
            </div>
          </div>
        </div>
        <div class="mobile-title-container">
          <h1 class="title">{{ titleText() }}</h1>
        </div>
        <div class="pane pane-2">
          <div class="contents" v-if="properties['List Items']">
            <div v-for="(listItem, index) in properties['List Items']" class="content-item" :class="imageClasses(index)"
                 :style="imageStyle(index)">
              <!--<img :src="listItem['Image'].value.url" class="content">-->
            </div>
          </div>
        </div>
      </div>
    </div>
  
  </div>
</template>

<script>
  export default {
    name: "BuildableReflexiveImageList",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      let hardCodedData = {
        itemIndex: 0,
        waypointTriggered: false,
        selectAfterInitialLoad: 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: {
      titleText() {
        return this.properties['Title'] ? this.properties['Title'].value : '';
      },
      isSelected(index) {
        return index === this.itemIndex;
      },
      imageStyle(index) {
        return `background-image: url(${this.properties['List Items'][index]['Image'].value.url})`;
      },
      imageClasses(index) {
        let classes = this.isSelected(index) ? 'selected ' : '';
        classes += this.contentItemNumber(index);
        return classes;
      },
      contentItemNumber(index) {
        return `content-item-${index}`;
      },
      selectItem(index) {
        this.selectAfterInitialLoad = true;
        this.itemIndex = index;
      }
    }
  }
</script>

<style scoped>

</style>