import { useEffect, MutableRefObject } from 'react';
import { ResizeObserver } from 'resize-observer';
import { useStoreActions } from '../store/hooks';

import { getDimensions } from '../utils';

export default (rendererNode: MutableRefObject<HTMLDivElement | null>) => {
  const updateSize = useStoreActions((actions) => actions.updateSize);

  useEffect(() => {
    let resizeObserver: ResizeObserver;

    const updateDimensions = () => {
      if (!rendererNode.current) {
        return;
      }

      const size = getDimensions(rendererNode.current);

      if (size.height === 0 || size.width === 0) {
        console.warn('The React Flow parent container needs a width and a height to render the graph.');
      }

      updateSize(size);
    };

    updateDimensions();
    window.onresize = updateDimensions;

    if (rendererNode.current) {
      resizeObserver = new ResizeObserver(() => updateDimensions());
      resizeObserver.observe(rendererNode.current);
    }

    return () => {
      window.onresize = null;

      if (resizeObserver && rendererNode.current) {
        resizeObserver.unobserve(rendererNode.current!);
      }
    };
  }, []);
};
