import { useState } from 'react';

import { isOverflowed } from '../utils/elements';

import { useResizeObserver } from './useResizeObserver';

/** Tracks whether a DOM element's content overflows its bounds. */
export const useOverflowed = () => {
  const [overflowed, setOverflowed] = useState(false);
  const [element, setElement] = useState<HTMLElement | null>(null);

  const ref = (node: HTMLElement | null) => {
    setElement(node);
  };

  useResizeObserver(element, entries => {
    for (const entry of entries) {
      const entryElement = entry.target as HTMLElement;
      setOverflowed(isOverflowed(entryElement));
    }
  });

  return {
    overflowed,
    ref,
  };
};

export default useOverflowed;