import useWindowSize from '@/common/hooks/use-window-size';
import useMeasure from '@/common/hooks/use-measure';

function calcItemWidth(width: number, min: number, gutter: number = 16) {
  // 列数
  if (width > 0) {
    const maxColumn = parseInt(String(width / (min + gutter)), 10);
    // 规则是以最大列数为标准 能多放尽量多放
    return width / maxColumn - gutter;
  } else {
    return min;
  }
}

const useResponsive = (minItemWidth: number, gutter: number = 16) => {
  const { width } = useWindowSize();
  const container = useMeasure([width]);

  const itemWidth = calcItemWidth(
    container.rect.width - gutter,
    minItemWidth,
    gutter,
  );
  return { container, itemWidth };
};

export default useResponsive;