import { useEffect } from "react";

let nodeList = new Map();
let observer = new window.ResizeObserver((entries) => {
  for (const entry of entries) {
    if (nodeList.has(entry.target)) {
      nodeList.get(entry.target)(entry);
    }
  }
});

export default function useResizeObserver(node, cb) {
  useEffect(() => {
    if (node && cb) {
      if (nodeList.has(node)) {
        console.warn("Warning: ResizeObserver is already observing node...");
        console.warn(node);
      } else {
        observer.observe(node);
        nodeList.set(node, cb);
      }
    }

    return function() {
      if (node) nodeList.delete(node);
      if (node && observer) observer.unobserve(node);
    };
  }, [node]);
}