<template>
  <ion-content scroll-events="true" v-on:ionScroll="scrolling($event)" v-on:ionScrollEnd="scrollEnd($event)" style="background: #fff !important">
    <slot></slot>
  </ion-content>
</template>

<script>
export default {
  props: {
    step: { 
      type: Number, 
      default: 3,
    },
    avgHeight: { 
      type: Number, 
      default: 300,
    },
    isAllLoaded: { 
      type: Boolean, 
      default: false,
    },
  },
  data() {
    return {
      current: this.step,
      lastY: 0,
      currentY: 0,
    };
  },
  methods: {
    scrolling(e) {
      if(!this.isAllLoaded) {
        this.currentY = e.detail.currentY;
        let isDown = this.lastY < this.currentY;
        let triggerDistance = (this.current * this.avgHeight) - 500;
   
        if (isDown && triggerDistance <= this.currentY) {
          this.$emit('loadNextPage', {start: this.current, end: this.current + this.step, step: this.step});
          this.current += this.step;
        }
      }
    },
    scrollEnd(e) {
      if(!this.isAllLoaded) {
        this.lastY = this.currentY;
      }
    },
  },
}
</script>