/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d43332 | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
import { Alert } from "../Alert/Alert.js";
import { isDevEnv } from "../../../utils/is-dev-env.js";
import { LayoutProvider, useLayoutActionsContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
import { INNER_STYLES, OUTER_STYLES, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { useResizeObserver } from "@react-aria/utils";

//#region src/components/content/Layout/Layout.tsx
const LayoutElement = tasty({
	as: "div",
	qa: "Layout",
	styles: {
		position: "relative",
		display: "block",
		overflow: {
			"": "visible",
			"do-not-overflow": "hidden"
		},
		flexGrow: 1,
		placeSelf: "stretch",
		height: {
			"": "auto",
			"auto-height": "fixed 100%",
			collapsed: "6x"
		},
		"$content-padding": "1x",
		"$layout-border-size": {
			"": "0",
			vertical: "1bw"
		},
		Inner: {
			$: ">",
			container: "layout / inline-size",
			position: "absolute",
			inset: "$inset-top $inset-right $inset-bottom $inset-left",
			display: "flex",
			flow: "column",
			placeContent: "stretch",
			placeItems: "stretch",
			transition: {
				"": "none",
				"has-transition": "inset $transition ease-out",
				"dragging | not-ready": "none"
			}
		}
	}
});
function LayoutInner(props) {
	const layoutActions = useLayoutActionsContext();
	const layoutState = useLayoutStateContext();
	const layoutRefs = useLayoutRefsContext();
	const localRef = useRef(null);
	const [isAutoHeight, setIsAutoHeight] = useState(false);
	const [isCollapsed, setIsCollapsed] = useState(false);
	const { isGrid, columns, rows, template, contentPadding, hasTransition = false, minContentSize, styles, children, style, forwardedRef, innerRef: innerRefProp, innerProps, _forceShowDevWarning, doNotOverflow, ...otherProps } = props;
	const combinedInnerRef = useCombinedRefs(innerRefProp);
	const updateContainerSize = layoutActions?.updateContainerSize;
	useResizeObserver({
		ref: localRef,
		onResize: useCallback(() => {
			if (localRef.current) updateContainerSize?.(localRef.current.offsetWidth, localRef.current.offsetHeight);
		}, [updateContainerSize])
	});
	const outerStyles = extractStyles(otherProps, OUTER_STYLES);
	const innerStyles = extractStyles(otherProps, INNER_STYLES);
	const isVertical = useMemo(() => {
		const flowFromProp = innerStyles?.flow;
		const flowFromStyles = (styles?.Inner)?.flow;
		const flowValue = flowFromProp ?? flowFromStyles;
		return typeof flowValue !== "string" || !flowValue.startsWith("row");
	}, [innerStyles?.flow, styles?.Inner]);
	const finalStyles = useMemo(() => {
		const gridStyles = {};
		if (isGrid) gridStyles.display = "grid";
		if (columns) gridStyles.gridColumns = columns;
		if (rows) gridStyles.gridRows = rows;
		if (template) gridStyles.gridTemplate = template;
		return mergeStyles(outerStyles, contentPadding != null ? { "$content-padding": contentPadding } : null, styles, { Inner: mergeStyles(innerStyles, gridStyles, styles?.Inner) });
	}, [
		outerStyles,
		innerStyles,
		contentPadding,
		styles,
		isGrid,
		columns,
		rows,
		template
	]);
	const panelSizes = layoutState?.panelSizes ?? {
		left: 0,
		top: 0,
		right: 0,
		bottom: 0
	};
	const isDragging = layoutState?.isDragging ?? false;
	const isReady = layoutState?.isReady ?? true;
	const markReady = layoutActions?.markReady;
	const dismissOverlayPanels = layoutActions?.dismissOverlayPanels;
	const hasOverlayPanels = layoutState?.hasOverlayPanels ?? false;
	useEffect(() => {
		const frameId = requestAnimationFrame(() => {
			markReady?.();
		});
		return () => cancelAnimationFrame(frameId);
	}, [markReady]);
	useEffect(() => {
		if (isReady && localRef.current && localRef.current.offsetHeight === 0) setIsAutoHeight(true);
	}, [isReady]);
	useEffect(() => {
		if (isAutoHeight && localRef.current) {
			const frameId = requestAnimationFrame(() => {
				if (localRef.current && localRef.current.offsetHeight === 0) setIsCollapsed(true);
			});
			return () => cancelAnimationFrame(frameId);
		}
	}, [isAutoHeight]);
	const insetStyle = useMemo(() => {
		const baseStyle = {
			"--inset-top": `${panelSizes.top}px`,
			"--inset-right": `${panelSizes.right}px`,
			"--inset-bottom": `${panelSizes.bottom}px`,
			"--inset-left": `${panelSizes.left}px`
		};
		if (style) return {
			...baseStyle,
			...style
		};
		return baseStyle;
	}, [panelSizes, style]);
	const mods = useMemo(() => ({
		dragging: isDragging,
		"not-ready": !isReady,
		"has-transition": hasTransition,
		"auto-height": isAutoHeight && !isCollapsed,
		collapsed: isCollapsed,
		vertical: isVertical,
		"do-not-overflow": doNotOverflow
	}), [
		isDragging,
		isReady,
		hasTransition,
		isAutoHeight,
		isCollapsed,
		isVertical,
		doNotOverflow
	]);
	const setRefs = (element) => {
		localRef.current = element;
		if (typeof forwardedRef === "function") forwardedRef(element);
		else if (forwardedRef) forwardedRef.current = element;
	};
	const showDevWarning = isCollapsed && (_forceShowDevWarning || isDevEnv());
	const handleInnerFocus = useCallback((e) => {
		if (!hasOverlayPanels) return;
		const inner = e.currentTarget;
		const relatedTarget = e.relatedTarget;
		if (!relatedTarget || !inner.contains(relatedTarget)) dismissOverlayPanels?.();
	}, [hasOverlayPanels, dismissOverlayPanels]);
	const handleKeyDown = useCallback((e) => {
		if (hasOverlayPanels && e.key === "Escape") {
			e.preventDefault();
			e.stopPropagation();
			dismissOverlayPanels?.();
		}
	}, [hasOverlayPanels, dismissOverlayPanels]);
	return /* @__PURE__ */ jsx(LayoutElement, {
		ref: setRefs,
		...filterBaseProps(otherProps, { eventProps: true }),
		mods,
		styles: finalStyles,
		style: insetStyle,
		onKeyDown: hasOverlayPanels ? handleKeyDown : void 0,
		children: showDevWarning ? /* @__PURE__ */ jsxs(Alert, {
			theme: "danger",
			children: [
				/* @__PURE__ */ jsx("b", { children: "UIKit:" }),
				" ",
				/* @__PURE__ */ jsx("b", { children: "<Layout/>" }),
				" has collapsed to ",
				/* @__PURE__ */ jsx("b", { children: "0" }),
				" height. Ensure the parent container has a defined height or use the",
				" ",
				/* @__PURE__ */ jsx("b", { children: "height" }),
				" prop on ",
				/* @__PURE__ */ jsx("b", { children: "<Layout/>" }),
				"."
			]
		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
			ref: combinedInnerRef,
			"data-element": "Inner",
			onFocus: handleInnerFocus,
			...innerProps,
			children
		}), /* @__PURE__ */ jsx("div", {
			ref: layoutRefs?.setPanelContainer,
			"data-element": "PanelContainer"
		})] })
	});
}
/**
* Layout component provides a vertical flex layout with overflow-safe content.
* Uses a two-element architecture (wrapper + content) to ensure content never overflows.
*/
function Layout(props, ref) {
	const { hasTransition, minContentSize } = props;
	return /* @__PURE__ */ jsx(LayoutProvider, {
		hasTransition,
		minContentSize,
		children: /* @__PURE__ */ jsx(LayoutInner, {
			...props,
			forwardedRef: ref
		})
	});
}
const _Layout = forwardRef(Layout);
_Layout.displayName = "Layout";

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