/** @license MIT | @cube-dev/ui-kit v0.123.0 | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
import { LayoutContextReset } from "./LayoutContext.js";
import { useTinyScrollbar } from "./hooks/useTinyScrollbar.js";
import { INNER_STYLES, OUTER_STYLES, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
import { forwardRef, useMemo, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useHover } from "react-aria";

//#region src/components/content/Layout/LayoutContent.tsx
const ContentElement = tasty({
	as: "div",
	qa: "LayoutContent",
	styles: {
		container: "content / inline-size",
		position: "relative",
		display: "grid",
		gridColumns: "1sf",
		gridRows: "1sf",
		placeContent: "stretch",
		placeItems: "stretch",
		placeSelf: "stretch",
		flexGrow: 1,
		flexShrink: 1,
		height: "min 0",
		overflow: "hidden",
		boxSizing: "content-box",
		border: {
			"": 0,
			"!:last-child": "($layout-border-size, 1bw) solid #border bottom"
		},
		Inner: {
			$: ">",
			display: "flex",
			flow: "column",
			padding: "($content-padding, 1x)",
			overflow: {
				"": "auto",
				"scrollbar=none": "clip"
			},
			placeSelf: "stretch",
			scrollbar: {
				"": "auto",
				"scrollbar=thin": "thin",
				"scrollbar=tiny | scrollbar=none": "none"
			},
			"$layout-border-size": "0"
		},
		ScrollbarV: {
			$: ">",
			position: "absolute",
			right: "1px",
			top: "$scrollbar-v-top",
			width: "1ow",
			height: "$scrollbar-v-height",
			radius: "round",
			fill: "#dark.35",
			opacity: {
				"": 0,
				"(focused | scrolling) & scrollbar=tiny": 1
			},
			transition: "opacity 0.15s",
			pointerEvents: "none"
		},
		ScrollbarH: {
			$: ">",
			position: "absolute",
			bottom: "1px",
			left: "$scrollbar-h-left",
			height: "1ow",
			width: "$scrollbar-h-width",
			radius: "round",
			fill: "#dark.35",
			opacity: {
				"": 0,
				"(focused | scrolling) & scrollbar=tiny": 1
			},
			transition: "opacity 0.15s",
			pointerEvents: "none"
		}
	}
});
function LayoutContent(props, ref) {
	const { children, scrollbar = "thin", styles, mods: externalMods, innerRef: innerRefProp, innerProps, ...otherProps } = props;
	const outerStyles = extractStyles(otherProps, OUTER_STYLES);
	const innerStyles = extractStyles(otherProps, INNER_STYLES);
	const internalInnerRef = useRef(null);
	const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);
	const combinedRef = useCombinedRefs(ref);
	const isTinyScrollbar = scrollbar === "tiny";
	const { hoverProps, isHovered } = useHover({});
	const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX, isScrolling } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);
	const scrollbarStyle = useMemo(() => {
		if (!isTinyScrollbar) return {};
		return {
			...handleVStyle,
			...handleHStyle
		};
	}, [
		isTinyScrollbar,
		handleVStyle,
		handleHStyle
	]);
	const mods = useMemo(() => ({
		...externalMods,
		scrollbar,
		hovered: isHovered,
		scrolling: isScrolling
	}), [
		externalMods,
		scrollbar,
		isHovered,
		isScrolling
	]);
	const finalStyles = useMemo(() => {
		return mergeStyles(styles, outerStyles, innerStyles ? { Inner: innerStyles } : null);
	}, [
		styles,
		outerStyles,
		innerStyles
	]);
	return /* @__PURE__ */ jsxs(ContentElement, {
		ref: combinedRef,
		...filterBaseProps(otherProps, { eventProps: true }),
		...hoverProps,
		mods,
		styles: finalStyles,
		style: scrollbarStyle,
		children: [
			/* @__PURE__ */ jsx("div", {
				ref: combinedInnerRef,
				"data-element": "Inner",
				...innerProps,
				children: /* @__PURE__ */ jsx(LayoutContextReset, { children })
			}),
			isTinyScrollbar && hasOverflowY && /* @__PURE__ */ jsx("div", { "data-element": "ScrollbarV" }),
			isTinyScrollbar && hasOverflowX && /* @__PURE__ */ jsx("div", { "data-element": "ScrollbarH" })
		]
	});
}
const _LayoutContent = forwardRef(LayoutContent);
_LayoutContent.displayName = "Layout.Content";

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