import { useRef, useState, useLayoutEffect } from 'react';

const hasMultipleRows = (container) => {
  const children = Array.from(container.children);
  if (children.length <= 1) return false;
  const firstTop = children[0].getBoundingClientRect().top;
  return children.some(
    (child) => child.getBoundingClientRect().top !== firstTop
  );
};
function useChipLayout({
  selectedOptionsLength,
  singleRow,
  maxChips
}) {
  const rowsRef = useRef(null);
  const [visibleCount, setVisibleCount] = useState(null);
  const prevSelectedLengthRef = useRef(selectedOptionsLength);
  useLayoutEffect(() => {
    if (prevSelectedLengthRef.current !== selectedOptionsLength) {
      prevSelectedLengthRef.current = selectedOptionsLength;
      setVisibleCount(null);
    }
  }, [selectedOptionsLength]);
  useLayoutEffect(() => {
    if (!singleRow || !rowsRef.current) {
      setVisibleCount(null);
      return;
    }
    if (visibleCount === null) {
      if (hasMultipleRows(rowsRef.current)) {
        const firstRowTop = rowsRef.current.children[0]?.getBoundingClientRect().top;
        const firstRowCount = Array.from(rowsRef.current.children).filter(
          (c) => c.getBoundingClientRect().top === firstRowTop
        ).length;
        setVisibleCount(Math.max(firstRowCount - 1, 0));
      }
      return;
    }
    if (hasMultipleRows(rowsRef.current) && visibleCount > 0) {
      setVisibleCount(visibleCount - 1);
    }
  }, [singleRow, selectedOptionsLength, visibleCount]);
  const maxAllowed = maxChips ?? 10;
  const displayCount = singleRow && visibleCount !== null ? Math.min(visibleCount, maxAllowed) : Math.min(selectedOptionsLength, maxAllowed);
  const hiddenCount = selectedOptionsLength - displayCount;
  return { rowsRef, displayCount, hiddenCount };
}

export { useChipLayout as u };
//# sourceMappingURL=useChipLayout-BWZfKDgd.js.map
