import { MutableRefObject, useCallback, useState } from "react";

import { useDidMount, useMutationObserver } from "hooks";

/**
 *
 * @kind 07-Misc
 */
export const useRect = (ref: MutableRefObject<HTMLElement | null>): DOMRect | null => {
  const [domRect, setDomRect] = useState<DOMRect | null>(null);

  const handleRect = useCallback(() => {
    setDomRect(ref.current ? ref.current.getBoundingClientRect() : null);
  }, [ref]);

  useDidMount(() => {
    handleRect();
  });

  useMutationObserver(ref, handleRect);

  return domRect;
};