import { useState, useEffect, useMemo } from "react";
import { getBox } from "../../state/modules/box-models";
import { useIsInBuilder } from "../../runtimes/react";
function useTableFormFieldRefs(propController, { fieldsCount }) {
  const [container, setContainer] = useState(null);
  const [items, setItems] = useState(
    Array(fieldsCount + 1).fill(null)
  );
  const isInBuilder = useIsInBuilder();
  useEffect(() => {
    if (!isInBuilder)
      return;
    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
    return () => {
      cancelAnimationFrame(animationFrameHandle);
    };
    function handleAnimationFrameRequest() {
      if (propController == null)
        return;
      if (container != null)
        propController.tableFormLayoutChange({ layout: getBox(container) });
      items.map((item, index) => {
        if (item == null)
          return;
        propController.tableFormFieldLayoutChange({ index, layout: getBox(item) });
      });
      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
    }
  }, [propController, container, items, isInBuilder]);
  const itemRefs = useMemo(
    () => Array.from({ length: fieldsCount + 1 }).map(
      (_, index) => (item) => {
        setItems((is) => [...is.slice(0, index), item, ...is.slice(index + 1)]);
      }
    ),
    [fieldsCount, setItems]
  );
  return { container: setContainer, items: itemRefs };
}
export {
  useTableFormFieldRefs
};
//# sourceMappingURL=useTableFormFieldRefs.js.map