/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-c2a807a
 * Released under the MIT license.
 */

import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, forwardRef, useContext, useMemo, useRef, } from 'react';
import { mergeProps, useDisclosure, useId } from 'react-aria';
import { useDisclosureGroupState, useDisclosureState, } from 'react-stately';
import { RightIcon } from '../../../icons/index.js';
import { extractStyles, OUTER_STYLES, tasty, } from '../../../tasty/index.js';
import { mergeRefs } from '../../../utils/react/index.js';
import { ItemButton } from '../../actions/ItemButton/index.js';
import { DisplayTransition } from '../../helpers/index.js';
// ============================================================================
// Contexts
// ============================================================================
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);
}
// ============================================================================
// Styled Components
// ============================================================================
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: '#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',
    },
});
// ============================================================================
// Disclosure Component
// ============================================================================
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);
    // When disabled, force expanded to false
    const effectiveIsExpanded = isDisabled ? false : controlledIsExpanded;
    const state = useDisclosureState({
        isExpanded: effectiveIsExpanded,
        defaultExpanded: isDisabled ? false : defaultExpanded,
        onExpandedChange: isDisabled ? undefined : onExpandedChange,
    });
    // When disabled, override state.isExpanded to false
    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 (_jsx(DisclosureContext.Provider, { value: contextValue, children: _jsx(DisclosureRoot, { ref: ref, qa: qa, mods: finalMods, styles: outerStyles, children: content }) }));
});
// ============================================================================
// Disclosure.Trigger Component
// ============================================================================
const DisclosureTrigger = forwardRef(function DisclosureTrigger(props, ref) {
    const { children, icon, mods, ...otherProps } = props;
    const context = useDisclosureContext();
    const { buttonProps, isDisabled, isExpanded, shape, triggerProps } = context;
    const finalMods = useMemo(() => ({
        expanded: isExpanded,
        disabled: isDisabled,
        shape,
        selected: false,
        ...mods,
    }), [isExpanded, isDisabled, shape, mods]);
    // Default icon is a rotating chevron
    const defaultIcon = _jsx(TriggerIcon, { mods: { expanded: isExpanded } });
    return (_jsx(StyledTrigger, { ref: ref, icon: icon ?? defaultIcon, isDisabled: isDisabled, isSelected: isExpanded, ...triggerProps, ...mergeProps(otherProps, buttonProps), mods: finalMods, children: children }));
});
// ============================================================================
// Disclosure.Content Component
// ============================================================================
const DisclosureContent = forwardRef(function DisclosureContent(props, ref) {
    const { children, styles, mods, ...otherProps } = props;
    const context = useDisclosureContext();
    const { panelProps, panelRef, isExpanded, transitionDuration, contentStyles, } = context;
    const mergedStyles = useMemo(() => ({
        ...contentStyles,
        ...styles,
    }), [contentStyles, styles]);
    // Filter out hidden attribute from panelProps since we manage visibility via CSS height animation
    const { hidden, ...filteredPanelProps } = panelProps;
    return (_jsx(DisplayTransition, { isShown: isExpanded, duration: transitionDuration, animateOnMount: false, children: ({ phase, isShown, ref: transitionRef }) => (_jsx(ContentWrapperElement, { ref: transitionRef, mods: { shown: isShown, phase }, children: _jsx(ContentElement, { ref: mergeRefs(ref, panelRef), mods: mods, styles: mergedStyles, ...filteredPanelProps, ...otherProps, children: children }) })) }));
});
// ============================================================================
// Disclosure.Group Component
// ============================================================================
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 (_jsx(DisclosureGroupContext.Provider, { value: contextValue, children: _jsx(GroupRoot, { ref: ref, qa: qa, mods: mods, styles: finalStyles, children: children }) }));
});
// ============================================================================
// Disclosure.Item Component
// ============================================================================
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();
    const id = providedId ?? defaultId;
    const groupContext = useDisclosureGroupContext();
    const panelRef = useRef(null);
    // Determine if disabled from group or item
    const isDisabled = itemDisabled || groupContext?.groupState?.isDisabled || false;
    // Determine expanded state from group or local props
    const groupIsExpanded = groupContext
        ? groupContext.groupState.expandedKeys.has(id)
        : undefined;
    // When disabled, force expanded to false
    const effectiveIsExpanded = isDisabled
        ? false
        : groupIsExpanded ?? controlledIsExpanded;
    const state = useDisclosureState({
        isExpanded: effectiveIsExpanded,
        defaultExpanded: isDisabled ? false : defaultExpanded,
        onExpandedChange(expanded) {
            if (isDisabled)
                return;
            if (groupContext) {
                groupContext.groupState.toggleKey(id);
            }
            onExpandedChange?.(expanded);
        },
    });
    // When disabled, override state.isExpanded to false
    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: undefined,
        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 (_jsx(DisclosureContext.Provider, { value: contextValue, children: _jsx(DisclosureRoot, { ref: ref, qa: qa, mods: finalMods, styles: finalStyles, "data-key": id, children: children }) }));
});
// ============================================================================
// Compound Component Export
// ============================================================================
const _Disclosure = Object.assign(DisclosureComponent, {
    Trigger: DisclosureTrigger,
    Content: DisclosureContent,
    Group: DisclosureGroup,
    Item: DisclosureItem,
});
export { _Disclosure as Disclosure };

        