import { useState, useEffect } from 'react';


/* Creates an Intersection Observer to keep track of headings intersecting
 * a section of the viewport defined by the rootMargin */
const getIntersectionObserver = (callback) => {
  return new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        callback(entry);
      });
    },
    {
      root: null,
      threshold: 0.55,
      rootMargin: "-65px 0% -85% 0%" // 65px is a navbar height
    }
  );
};

const useHeadingsObserver = () => {
  const [activeHeading, setActiveHeading] = useState("");
  const [observer, setObserver] = useState(null);

  /* Runs only after the first render, in order to preserve the observer
   * between component rerenderings (e.g. after activeHeading change). */
  useEffect((() => {
    const observer = getIntersectionObserver((entry) => {
      if (entry.isIntersecting) {
        setActiveHeading(entry.target.id);
      }
    });
    setObserver(observer);

    return observer.disconnect();
  }), [])

  /* On initial render activeHeading will be `null`, since the observer
   * has not been instantiated yet. However, we still want to highlight
   * the current heading in the ToC based on the current url. */
  useEffect(() => {
    if (!activeHeading) {
      return
    }

    const tocLink = document.querySelector(`.toc-link[href="#${activeHeading}"]`)
    tocLink.classList.add("active");

    return () => {
      tocLink.classList.remove("active")
    }
  }, [activeHeading])

  return observer;
}

export default useHeadingsObserver;