import { debounce } from 'lodash';
import { useEffect, useRef, useState } from 'react';

/**
 * 用于追踪 DOM 元素尺寸的 hook。
 *
 * @param initialWidth - 初始宽度。
 * @param initialHeight - 初始高度。
 * @param deps - 依赖列表。
 * @return 一个元组，包含 DOM 元素的 ref、当前宽度和当前高度。
 */
export function useDomSize<T extends HTMLElement>(
  initialWidth: number,
  initialHeight: number,
  deps: React.DependencyList = [],
) {
  const domRef = useRef<T>(null);
  const [width, setWidth] = useState(initialWidth);
  const [height, setHeight] = useState(initialHeight);

  useEffect(() => {
    const setDomHeight = () => {
      if (domRef.current) {
        setHeight(domRef.current.offsetHeight);
        setWidth(domRef.current.offsetWidth);
      }
    };
    const debounceFunc = debounce(setDomHeight, 100);

    setDomHeight();
    window.addEventListener('resize', debounceFunc);

    return () => {
      window.removeEventListener('resize', debounceFunc);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);

  return [domRef, { width, height }] as const;
}