import {useEventListener, useThrottleFn} from 'ahooks';
import {useEffect, useState} from 'react';

export function useCardRect() {
  const [rect, setRect] = useState({width: 0, height: 0});

  const {run, cancel} = useThrottleFn(
    function () {
      const cardElement = document.querySelector('.main-card-item-expand');
      if (cardElement) {
        const {width, height} = cardElement.getBoundingClientRect();

        setRect({width, height});
      }
    },
    {
      wait: 300,
      leading: false,
      trailing: true,
    },
  );

  useEventListener('resize', run);

  useEffect(
    function () {
      run();

      return cancel;
    },
    [cancel, run],
  );

  return rect;
}

export function useMockAnimate() {
  const [width, setWidth] = useState(0);

  useEffect(function () {
    const timer = setTimeout(function () {
      setWidth(50);
    }, 500);

    return () => clearTimeout(timer);
  }, []);

  return width;
}
