export default {
  deactivated() {
    this.preVisibleEls = null;
  },
  methods: {
    isVisible(offsetInfo, viewInfo, ratio = 0.5) {
      return !((offsetInfo.offsetTop + offsetInfo.offsetHeight * (1 - ratio)) < viewInfo.top ||
        (offsetInfo.offsetTop + offsetInfo.offsetHeight * ratio) > viewInfo.bottom);
    },
    scrollEndHandler({y = this.$refs.pageScroll && this.$refs.pageScroll.$el.offsetTop} = {}) {
      const scrollTop = Math.abs(y);

      let pageScrollHeight = this.$refs.pageScroll.$el.offsetHeight;

      if (pageScrollHeight === 0) {
        const app = document.querySelector('#app');
        const header = document.querySelector('.layout-header');
        const footer = document.querySelector('.footer');

        pageScrollHeight = app && app.offsetHeight || window.innerHeight;
        if (header) {
          pageScrollHeight -= header.offsetHeight;
        }
        if (footer) {
          pageScrollHeight -= footer.offsetHeight;
        }
      }

      const viewInfo = {
        top: scrollTop,
        bottom: scrollTop + pageScrollHeight,
      };

      this.collectTrackingInfo(viewInfo, this.listDataDirty);

      const visibleEls = Object.keys(this.yasTargets).filter(key => {
        return this.isVisible(this.yasTargets[key].el, viewInfo);
      });

      let visibleChangedEls;

      if (!this.preVisibleEls) {
        visibleChangedEls = visibleEls;
      } else {
        visibleChangedEls = visibleEls.filter(key => {
          return !this.preVisibleEls.includes(key);
        });
      }

      this.preVisibleEls = visibleEls;

      if (visibleChangedEls.length > 0) {
        const DATA = visibleChangedEls.map(key => this.yasTargets[key].yasParams);

        this.$store.dispatch('reportYas', {
          params: {
            param: {DATA},
            appop: 'XY_UFO_SHOW_EVENT'
          }
        });
      }

      this.listDataDirty = false;
    },
  },
};