import { LAYOUT_COLS as o, LAYOUT_ROW_HEIGHT as O } from "../../../../sdk/dist/shared/layout-constants.js";
import { useState, useEffect } from "react";
import { usePreviewMode, useEditorHelpers } from "../../../../../use-editor.js";
import { debounce } from "lodash-es";
function useGridObserver(elementRef) {
  const [colWidth, setColWidth] = useState(0);
  usePreviewMode();
  const { setGridConfig } = useEditorHelpers();
  useEffect(() => {
    const updateCellWidth = debounce(() => {
      if (elementRef.current) {
        const containerWidth = elementRef.current.clientWidth;
        setColWidth(containerWidth / o);
      }
    }, 250);
    if (!elementRef.current) {
      return;
    }
    updateCellWidth();
    const observer = new MutationObserver(updateCellWidth);
    observer.observe(elementRef.current, {
      attributes: true,
      attributeFilter: ["style", "class"]
    });
    window.addEventListener("resize", updateCellWidth, true);
    return () => {
      window.removeEventListener("resize", updateCellWidth, true);
      observer.disconnect();
    };
  }, [elementRef]);
  useEffect(() => {
    if (colWidth) {
      setGridConfig({
        colWidth,
        rowHeight: O
      });
    }
  }, [colWidth, setGridConfig]);
  return {
    colWidth,
    rowHeight: O
  };
}
export {
  useGridObserver
};
//# sourceMappingURL=use-grid-observer.js.map
