import React from "react";

export default class IsIntersecting extends React.Component {
  state = {isIntersecting: false};
  observer = null;

  rootRef = React.createRef();
  elementRef = React.createRef();

  componentDidMount() {
    this.checkIfSetup();
  }

  componentDidUpdate() {
    this.checkIfSetup();
  }

  checkIfSetup() {
    if (typeof IntersectionObserver === "undefined") return;
    if (!this.observer) {
      if (this.rootRef.current && this.elementRef.current) {
        this.observer = new IntersectionObserver(this.onUpdate, {
          root: this.rootRef.current,
          threshold: [0, 0.001],
        });
        this.observer.observe(this.elementRef.current);
      }
    } else {
      if (!this.rootRef.current || !this.elementRef.current) {
        console.log("teardown");
        this.observer.disconnect();
        this.observer = null;
      }
    }
  }

  onUpdate = entries => {
    console.log("entries", entries);
  };

  render() {
    const {isActive} = this.state;
    return this.props.children({rootRef: this.rootRef, elementRef: this.elementRef, isActive});
  }
}