/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b04eed0 | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
import { RightIcon } from "../../../icons/RightIcon.js";
import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
import { OUTER_STYLES, tasty } from "@tenphi/tasty";
import { createContext, forwardRef, useContext, useMemo, useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { mergeProps, useDisclosure, useId as useId$1 } from "react-aria";
import { useDisclosureGroupState, useDisclosureState } from "react-stately";

//#region src/components/content/Disclosure/Disclosure.tsx
const DisclosureContext = createContext(null);
const DisclosureGroupContext = createContext(null);
function useDisclosureContext() {
	const context = useContext(DisclosureContext);
	if (!context) throw new Error("Disclosure.Trigger and Disclosure.Content must be used within a Disclosure");
	return context;
}
function useDisclosureGroupContext() {
	return useContext(DisclosureGroupContext);
}
const DisclosureRoot = tasty({
	qa: "Disclosure",
	styles: {
		display: "flex",
		flow: "column",
		gap: 0,
		position: "relative",
		border: {
			"": "none",
			"shape=card": "1bw solid #border"
		},
		radius: {
			"": "1r",
			"shape=card": "1cr",
			"shape=sharp": "0"
		},
		fill: {
			"": false,
			"shape=card": "#white"
		}
	}
});
const ContentWrapperElement = tasty({
	qa: "DisclosureContentWrapper",
	styles: {
		display: "block",
		overflow: "hidden",
		interpolateSize: "allow-keywords",
		height: {
			"": 0,
			shown: "max-content"
		},
		transition: "height $disclosure-transition"
	}
});
const ContentElement = tasty({
	qa: "DisclosureContent",
	styles: {
		display: "block",
		flow: "column",
		contentVisibility: "auto"
	}
});
const GroupRoot = tasty({
	qa: "DisclosureGroup",
	styles: {
		display: "flex",
		flow: "column",
		gap: "0"
	}
});
const TriggerIcon = tasty(RightIcon, { styles: {
	transition: "rotate",
	rotate: {
		"": "0deg",
		expanded: "90deg"
	}
} });
const StyledTrigger = tasty(_ItemButton, {
	qa: "DisclosureTrigger",
	type: "header",
	styles: {
		radius: {
			"": "1r",
			"expanded & shape=card": "(1cr - 1bw) (1cr - 1bw) 0 0",
			"shape=sharp": "0"
		},
		border: "#clear"
	}
});
const DisclosureComponent = forwardRef(function Disclosure(props, ref) {
	const { isExpanded: controlledIsExpanded, defaultExpanded, onExpandedChange, isDisabled = false, children, shape = "default", transitionDuration, qa, mods, ...otherProps } = props;
	const groupContext = useDisclosureGroupContext();
	const panelRef = useRef(null);
	const state = useDisclosureState({
		isExpanded: isDisabled ? false : controlledIsExpanded,
		defaultExpanded: isDisabled ? false : defaultExpanded,
		onExpandedChange: isDisabled ? void 0 : onExpandedChange
	});
	const isExpanded = isDisabled ? false : state.isExpanded;
	const { buttonProps, panelProps } = useDisclosure({
		isExpanded,
		isDisabled
	}, state, panelRef);
	const contextValue = useMemo(() => ({
		state,
		buttonProps,
		panelProps,
		panelRef,
		isDisabled,
		isExpanded,
		shape,
		transitionDuration,
		triggerProps: groupContext?.triggerProps,
		contentStyles: groupContext?.contentStyles
	}), [
		state,
		buttonProps,
		panelProps,
		isDisabled,
		isExpanded,
		shape,
		transitionDuration,
		groupContext?.triggerProps,
		groupContext?.contentStyles
	]);
	const stateContext = useMemo(() => ({
		isExpanded,
		toggle: state.toggle,
		expand: state.expand,
		collapse: state.collapse
	}), [
		isExpanded,
		state.toggle,
		state.expand,
		state.collapse
	]);
	const outerStyles = extractStyles(otherProps, OUTER_STYLES);
	const finalMods = useMemo(() => ({
		expanded: isExpanded,
		disabled: isDisabled,
		shape,
		...mods
	}), [
		isExpanded,
		isDisabled,
		shape,
		mods
	]);
	const content = typeof children === "function" ? children(stateContext) : children;
	return /* @__PURE__ */ jsx(DisclosureContext.Provider, {
		value: contextValue,
		children: /* @__PURE__ */ jsx(DisclosureRoot, {
			ref,
			qa,
			mods: finalMods,
			styles: outerStyles,
			children: content
		})
	});
});
const DisclosureTrigger = forwardRef(function DisclosureTrigger(props, ref) {
	const { children, icon, mods, ...otherProps } = props;
	const { buttonProps, isDisabled, isExpanded, shape, triggerProps } = useDisclosureContext();
	const finalMods = useMemo(() => ({
		expanded: isExpanded,
		disabled: isDisabled,
		shape,
		selected: false,
		...mods
	}), [
		isExpanded,
		isDisabled,
		shape,
		mods
	]);
	return /* @__PURE__ */ jsx(StyledTrigger, {
		ref,
		icon: icon ?? /* @__PURE__ */ jsx(TriggerIcon, { mods: { expanded: isExpanded } }),
		isDisabled,
		isSelected: isExpanded,
		...triggerProps,
		...mergeProps(otherProps, buttonProps),
		mods: finalMods,
		children
	});
});
const DisclosureContent = forwardRef(function DisclosureContent(props, ref) {
	const { children, styles, mods, ...otherProps } = props;
	const { panelProps, panelRef, isExpanded, transitionDuration, contentStyles } = useDisclosureContext();
	const mergedStyles = useMemo(() => ({
		...contentStyles,
		...styles
	}), [contentStyles, styles]);
	const { hidden, ...filteredPanelProps } = panelProps;
	return /* @__PURE__ */ jsx(DisplayTransition, {
		isShown: isExpanded,
		duration: transitionDuration,
		animateOnMount: false,
		children: ({ phase, isShown, ref: transitionRef }) => /* @__PURE__ */ jsx(ContentWrapperElement, {
			ref: transitionRef,
			mods: {
				shown: isShown,
				phase
			},
			tokens: transitionDuration != null ? { "$disclosure-transition": `${transitionDuration}ms` } : void 0,
			children: /* @__PURE__ */ jsx(ContentElement, {
				ref: mergeRefs(ref, panelRef),
				mods,
				styles: mergedStyles,
				...filteredPanelProps,
				...otherProps,
				children
			})
		})
	});
});
const DisclosureGroup = forwardRef(function DisclosureGroup(props, ref) {
	const { allowsMultipleExpanded = false, expandedKeys, defaultExpandedKeys, onExpandedChange, isDisabled = false, triggerProps, contentStyles, children, qa, mods, styles, ...otherProps } = props;
	const groupState = useDisclosureGroupState({
		allowsMultipleExpanded,
		expandedKeys,
		defaultExpandedKeys,
		onExpandedChange,
		isDisabled
	});
	const contextValue = useMemo(() => ({
		groupState,
		triggerProps,
		contentStyles
	}), [
		groupState,
		triggerProps,
		contentStyles
	]);
	const outerStyles = extractStyles(otherProps, OUTER_STYLES);
	const finalStyles = useMemo(() => ({
		...outerStyles,
		...styles
	}), [outerStyles, styles]);
	return /* @__PURE__ */ jsx(DisclosureGroupContext.Provider, {
		value: contextValue,
		children: /* @__PURE__ */ jsx(GroupRoot, {
			ref,
			qa,
			mods,
			styles: finalStyles,
			children
		})
	});
});
const DisclosureItem = forwardRef(function DisclosureItem(props, ref) {
	const { id: providedId, children, isDisabled: itemDisabled = false, isExpanded: controlledIsExpanded, defaultExpanded, onExpandedChange, shape = "default", qa, mods, styles, ...otherProps } = props;
	const defaultId = useId$1();
	const id = providedId ?? defaultId;
	const groupContext = useDisclosureGroupContext();
	const panelRef = useRef(null);
	const isDisabled = itemDisabled || groupContext?.groupState?.isDisabled || false;
	const groupIsExpanded = groupContext ? groupContext.groupState.expandedKeys.has(id) : void 0;
	const state = useDisclosureState({
		isExpanded: isDisabled ? false : groupIsExpanded ?? controlledIsExpanded,
		defaultExpanded: isDisabled ? false : defaultExpanded,
		onExpandedChange(expanded) {
			if (isDisabled) return;
			if (groupContext) groupContext.groupState.toggleKey(id);
			onExpandedChange?.(expanded);
		}
	});
	const isExpanded = isDisabled ? false : state.isExpanded;
	const { buttonProps, panelProps } = useDisclosure({
		isExpanded,
		isDisabled
	}, state, panelRef);
	const contextValue = useMemo(() => ({
		state,
		buttonProps,
		panelProps,
		panelRef,
		isDisabled,
		isExpanded,
		shape,
		transitionDuration: void 0,
		triggerProps: groupContext?.triggerProps,
		contentStyles: groupContext?.contentStyles
	}), [
		state,
		buttonProps,
		panelProps,
		isDisabled,
		isExpanded,
		shape,
		groupContext?.triggerProps,
		groupContext?.contentStyles
	]);
	const outerStyles = extractStyles(otherProps, OUTER_STYLES);
	const finalStyles = useMemo(() => ({
		...outerStyles,
		...styles
	}), [outerStyles, styles]);
	const finalMods = useMemo(() => ({
		expanded: isExpanded,
		disabled: isDisabled,
		shape,
		...mods
	}), [
		isExpanded,
		isDisabled,
		shape,
		mods
	]);
	return /* @__PURE__ */ jsx(DisclosureContext.Provider, {
		value: contextValue,
		children: /* @__PURE__ */ jsx(DisclosureRoot, {
			ref,
			qa,
			mods: finalMods,
			styles: finalStyles,
			"data-key": id,
			children
		})
	});
});
const _Disclosure = Object.assign(DisclosureComponent, {
	Trigger: DisclosureTrigger,
	Content: DisclosureContent,
	Group: DisclosureGroup,
	Item: DisclosureItem
});

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