/** @license MIT | @cube-dev/ui-kit v0.127.1 | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { mergeProps } from "../../../utils/react/mergeProps.js";
import { DirectionIcon } from "../../../icons/DirectionIcon.js";
import { ButtonSplitContext } from "./context.js";
import { Button } from "../Button/Button.js";
import { __Menu } from "../Menu/Menu.js";
import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
import { forwardRef, useCallback, useMemo, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/actions/ButtonSplit/ButtonSplit.tsx
const STYLE_PROPS = CONTAINER_STYLES;
const ButtonSplitElement = tasty({
	tag: "div",
	qa: "ButtonSplit",
	styles: {
		display: "inline-flex",
		position: "relative",
		verticalAlign: "bottom"
	}
});
const ButtonSplit = forwardRef(function ButtonSplit(props, ref) {
	const { actions, actionKey: controlledActionKey, defaultActionKey, onAction, onActionChange, type, theme, size, isDisabled, actionProps, triggerProps, menuProps, styles, children, ...rest } = props;
	const isControlled = controlledActionKey !== void 0;
	const [uncontrolledKey, setUncontrolledKey] = useState(() => defaultActionKey ?? actions?.[0]?.key);
	const currentKey = isControlled ? controlledActionKey : uncontrolledKey;
	const currentAction = useMemo(() => actions?.find((a) => a.key === currentKey) ?? actions?.[0], [actions, currentKey]);
	const handleActionPress = useCallback(() => {
		if (currentKey) onAction?.(currentKey);
	}, [currentKey, onAction]);
	const handleSelectionChange = useCallback((keys) => {
		const newKey = keys[0];
		if (newKey) {
			if (!isControlled) setUncontrolledKey(newKey);
			onActionChange?.(newKey);
		}
	}, [isControlled, onActionChange]);
	const containerStyles = extractStyles(rest, STYLE_PROPS);
	const mergedStyles = useMemo(() => ({
		...containerStyles,
		...styles
	}), [containerStyles, styles]);
	const contextValue = useMemo(() => ({
		currentKey,
		onAction,
		onActionChange,
		type,
		theme,
		size,
		isDisabled
	}), [
		currentKey,
		onAction,
		onActionChange,
		type,
		theme,
		size,
		isDisabled
	]);
	const isCustomMode = children != null;
	return /* @__PURE__ */ jsx(ButtonSplitContext.Provider, {
		value: contextValue,
		children: /* @__PURE__ */ jsx(ButtonSplitElement, {
			ref,
			"data-button-split": true,
			styles: mergedStyles,
			qa: rest.qa,
			children: isCustomMode ? children : actions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
				type,
				theme,
				size,
				isDisabled,
				icon: currentAction?.icon,
				...mergeProps(actionProps, { onPress: handleActionPress }),
				children: currentAction?.label
			}), /* @__PURE__ */ jsxs(__Menu.Trigger, {
				placement: "bottom end",
				children: [/* @__PURE__ */ jsx(Button, {
					type,
					theme,
					size,
					isDisabled,
					"aria-label": "More options",
					icon: ({ pressed }) => /* @__PURE__ */ jsx(DirectionIcon, { to: pressed ? "up" : "down" }),
					...triggerProps
				}), /* @__PURE__ */ jsx(__Menu, {
					selectionMode: "single",
					selectedKeys: currentKey ? [currentKey] : [],
					onSelectionChange: handleSelectionChange,
					...menuProps,
					children: actions.map(({ key, label, textValue, ...itemProps }) => /* @__PURE__ */ jsx(__Menu.Item, {
						textValue: textValue ?? (typeof label === "string" ? label : key),
						...itemProps,
						children: label
					}, key))
				})]
			})] }) : null
		})
	});
});
ButtonSplit.displayName = "ButtonSplit";

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