/** @license MIT | @cube-dev/ui-kit v0.147.0 | Cube Dev Team */
import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
import { useEvent } from "../../../_internal/hooks/use-event.js";
import { getCompactor } from "./grid-core/compactors.js";
import { Board } from "./Board.js";
import { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint } from "./responsive-utils.js";
import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";
import { useResizeObserver } from "@react-aria/utils";

//#region src/components/layout/Board/BoardResponsive.tsx
function compactTypeToCore(compact) {
	if (compact === "free") return null;
	return compact;
}
function BoardResponsiveInner(props, ref) {
	const { breakpoints, cols, layouts: controlledLayouts, defaultLayouts, onLayoutChange, onBreakpointChange, onWidthChange, breakpoint: forcedBreakpoint, width: providedWidth, compact = "vertical", allowOverlap = false, preventCollision = false, ...boardProps } = props;
	const boardRef = useRef(null);
	const combinedRef = useCombinedRefs(ref, boardRef);
	const [measuredWidth, setMeasuredWidth] = useState(0);
	useResizeObserver({
		ref: boardRef,
		onResize: useEvent(() => {
			const next = boardRef.current?.offsetWidth ?? 0;
			if (next > 0) setMeasuredWidth((prev) => prev === next ? prev : next);
		})
	});
	const isControlled = controlledLayouts !== void 0;
	const [internalLayouts, setInternalLayouts] = useState(() => controlledLayouts ?? defaultLayouts ?? {});
	const currentLayouts = isControlled ? controlledLayouts : internalLayouts;
	const layoutsRef = useRef(currentLayouts);
	layoutsRef.current = currentLayouts;
	const widthForBreakpoint = providedWidth ?? measuredWidth;
	const activeBreakpoint = forcedBreakpoint ?? getBreakpointFromWidth(breakpoints, widthForBreakpoint);
	const activeCols = getColsFromBreakpoint(activeBreakpoint, cols);
	const lastBreakpointRef = useRef(activeBreakpoint);
	const compactor = useMemo(() => getCompactor(compactTypeToCore(compact), allowOverlap, preventCollision), [
		compact,
		allowOverlap,
		preventCollision
	]);
	const currentLayout = useMemo(() => {
		const existing = currentLayouts[activeBreakpoint];
		if (existing) return existing;
		return findOrGenerateResponsiveLayout(currentLayouts, breakpoints, activeBreakpoint, lastBreakpointRef.current, activeCols, compactor);
	}, [
		currentLayouts,
		breakpoints,
		activeBreakpoint,
		activeCols,
		compactor
	]);
	const onBreakpointChangeEvent = useEvent(() => onBreakpointChange?.(activeBreakpoint, activeCols));
	const bpInitializedRef = useRef(false);
	useEffect(() => {
		if (!bpInitializedRef.current) {
			bpInitializedRef.current = true;
			lastBreakpointRef.current = activeBreakpoint;
			return;
		}
		onBreakpointChangeEvent();
		lastBreakpointRef.current = activeBreakpoint;
	}, [activeBreakpoint]);
	const onWidthChangeEvent = useEvent(() => onWidthChange?.(widthForBreakpoint, activeCols));
	useEffect(() => {
		if (providedWidth != null) return;
		if (measuredWidth <= 0) return;
		onWidthChangeEvent();
	}, [measuredWidth, activeCols]);
	return /* @__PURE__ */ jsx(Board, {
		ref: combinedRef,
		layout: currentLayout,
		cols: activeCols,
		width: providedWidth,
		compact,
		allowOverlap,
		preventCollision,
		onLayoutChange: useEvent((next) => {
			const merged = {
				...layoutsRef.current,
				[activeBreakpoint]: next
			};
			layoutsRef.current = merged;
			if (!isControlled) setInternalLayouts(merged);
			onLayoutChange?.(next, merged);
		}),
		...boardProps
	});
}
/**
* A responsive wrapper around `Board` that selects a layout and column count
* based on the container's width (or a forced breakpoint). Mirrors the model of
* react-grid-layout's `Responsive` + `WidthProvider`: per-breakpoint `layouts`
* and `cols`, with `onLayoutChange` reporting both the active layout and the
* full map.
*/
const BoardResponsive = forwardRef(BoardResponsiveInner);

//#endregion
export { BoardResponsive };
//# sourceMappingURL=BoardResponsive.js.map