/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-f1f3d22 | Cube Dev Team */
import { tasty } from "../../../tasty/tasty.js";
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
import { ItemActionProvider } from "../ItemActionContext.js";
import { useAction } from "../use-action.js";
import { ItemAction } from "../ItemAction/ItemAction.js";
import { ItemBadge } from "../../content/ItemBadge/ItemBadge.js";
import { _Item } from "../../content/Item/Item.js";
import { forwardRef, useLayoutEffect, useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useFocusWithin, useHover } from "react-aria";

//#region src/components/actions/ItemButton/ItemButton.tsx
const StyledItem = tasty(_Item, {
	as: "button",
	type: "neutral",
	theme: "default",
	styles: {
		reset: "button",
		appearance: "none",
		touchAction: "manipulation",
		textDecoration: "none",
		placeContent: "center stretch"
	}
});
const ActionsWrapper = tasty({ styles: {
	display: "grid",
	position: "relative",
	placeContent: "stretch",
	placeItems: "stretch",
	$size: {
		"": "$size-md",
		"size=xsmall": "$size-xs",
		"size=small": "$size-sm",
		"size=medium": "$size-md",
		"size=large": "$size-lg",
		"size=xlarge": "$size-xl"
	},
	Actions: {
		$: ">",
		position: "absolute",
		inset: {
			"": "1bw 1bw auto auto",
			"type=card": "(1bw + .5x) (1bw + .5x) auto auto"
		},
		display: "flex",
		gap: "1bw",
		placeItems: "center",
		placeContent: "center end",
		pointerEvents: {
			"": "auto",
			"!actions-shown": "none"
		},
		padding: "0 $side-padding",
		height: "min ($size - 2bw)",
		opacity: {
			"": 1,
			"!actions-shown": 0
		},
		translate: {
			"": "0 0",
			"!actions-shown": ".5x 0"
		},
		transition: "theme, translate",
		"$action-size": "min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))",
		"$side-padding": "(($size - $action-size - 2bw) / 2)"
	}
} });
const ItemButton = forwardRef(function ItemButton(allProps, ref) {
	const { mods, to, htmlType, as, type = "neutral", theme = "default", onPress, onPressStart: _onPressStart, onPressEnd: _onPressEnd, onPressChange: _onPressChange, onPressUp: _onPressUp, actions, size = "medium", wrapperStyles, autoHideActions = false, disableActionsFocus = false, isDisabled, isLoading = false, ...rest } = allProps;
	const finalIsDisabled = isDisabled === true || isLoading && isDisabled !== false;
	const actionsRef = useRef(null);
	const [actionsWidth, setActionsWidth] = useState(0);
	const [areActionsVisible, setAreActionsVisible] = useState(false);
	const [areActionsShown, setAreActionsShown] = useState(false);
	useLayoutEffect(() => {
		if (actions && actionsRef.current) {
			const width = Math.round(actionsRef.current.offsetWidth);
			if (width !== actionsWidth) setActionsWidth(width);
		}
	}, [actions, areActionsVisible]);
	const [isFocusWithin, setIsFocusWithin] = useState(false);
	const [hasPressed, setHasPressed] = useState(false);
	const { hoverProps, isHovered } = useHover({});
	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocusWithin });
	useLayoutEffect(() => {
		const actionsEl = actionsRef.current;
		if (!actionsEl || !autoHideActions) return;
		const checkPressed = () => {
			setHasPressed(actionsEl.querySelector("[data-pressed]") !== null);
		};
		const observer = new MutationObserver(checkPressed);
		observer.observe(actionsEl, {
			attributes: true,
			attributeFilter: ["data-pressed"],
			subtree: true
		});
		checkPressed();
		return () => observer.disconnect();
	}, [areActionsVisible, autoHideActions]);
	const shouldShowActions = isHovered || isFocusWithin || hasPressed || !autoHideActions;
	const { actionProps } = useAction({
		...allProps,
		htmlType,
		to,
		as,
		mods,
		isDisabled: finalIsDisabled
	}, ref);
	const finalMods = useMemo(() => {
		return shouldShowActions ? {
			...mods,
			"actions-shown": true
		} : mods;
	}, [mods, shouldShowActions]);
	const button = /* @__PURE__ */ jsx(StyledItem, {
		insideWrapper: !!actions,
		showActions: shouldShowActions,
		actions: actions ? true : void 0,
		...mergeProps$1(rest, actionProps),
		htmlType: actionProps.type,
		type,
		theme,
		size,
		isLoading,
		isDisabled
	});
	if (actions) return /* @__PURE__ */ jsxs(ActionsWrapper, {
		...hoverProps,
		"data-size": size,
		"data-type": type,
		"data-theme": theme,
		mods: finalMods,
		styles: wrapperStyles,
		style: {
			"--actions-width": areActionsVisible || !autoHideActions ? `${actionsWidth}px` : "0px",
			...typeof size === "number" && { "--size": `${size}px` }
		},
		children: [button, /* @__PURE__ */ jsx(ItemActionProvider, {
			type,
			theme,
			disableActionsFocus,
			isDisabled: finalIsDisabled,
			children: autoHideActions ? /* @__PURE__ */ jsx(DisplayTransition, {
				exposeUnmounted: true,
				isShown: shouldShowActions,
				onPhaseChange: (phase) => {
					setAreActionsVisible(phase !== "unmounted");
				},
				onToggle: (isShown) => {
					setAreActionsShown(isShown);
				},
				children: ({ ref: transitionRef }) => {
					return /* @__PURE__ */ jsx("div", {
						...focusWithinProps,
						ref: (node) => {
							actionsRef.current = node;
							transitionRef(node);
						},
						"data-element": "Actions",
						children: actions
					});
				}
			}) : /* @__PURE__ */ jsx("div", {
				ref: actionsRef,
				"data-element": "Actions",
				children: actions
			})
		})]
	});
	return button;
});
const _ItemButton = Object.assign(ItemButton, {
	Action: ItemAction,
	Badge: ItemBadge
});

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