<template>
  <div class="observer"></div>
</template>

<script>
import {
  loadExternalScript,
  hasIntersectionObserverSupport
} from '../../helpers';

export default {
  props: ['options'],

  data: () => ({ observer: null, intersected: false }),
  mounted() {
    if (!hasIntersectionObserverSupport) {
      loadExternalScript(
        '//cdn.polyfill.io/v3/polyfill.min.js?features=IntersectionObserver'
      );
    }
    // It is supported, load the images
    const options = this.options || {};
    this.observer = new IntersectionObserver(([entry]) => {
      if (entry && entry.isIntersecting) {
        this.intersected = true;
        this.$emit('intersect');
        this.observer.disconnect();
      }
    }, options);

    this.observer.observe(this.$el);
  },
  destroyed() {
    this.observer.disconnect();
  }
};
</script>