import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useState } from 'react';
import { useFocus, useFocusVisible, useFocusWithin, useHover, usePress } from 'react-aria';
import { mergeProps, tasty, Text } from '@cube-dev/ui-kit';
import { Arrow } from '../Arrow';
const StyledAccordionItemTitleWrap = tasty({
    styles: {
        display: 'grid',
        gridColumns: {
            '': '1fr auto',
            subtitle: 'auto 1fr auto',
        },
        placeItems: 'center start',
        gap: '0',
        width: '100%',
        borderRadius: { '': 0, focused: '0.5x' },
        outline: { '': '#purple-04.0', focused: '#purple-04' },
    },
});
const StyledAccordionItemTitle = memo(tasty({
    styles: {
        display: 'grid',
        width: '100%',
        gridTemplateAreas: '"icon . title ."',
        gridTemplateColumns: '2x 1x auto 1fr',
        alignItems: 'center',
        padding: {
            '': '1.75x 1x 1.75x 0',
            '[data-size="small"]': '0.5x 1x 0.5x 0',
        },
        cursor: 'pointer',
        userSelect: 'none',
    },
}));
const TitleSection = tasty({
    styles: { gridArea: 'title', width: 'max 100%', overflow: 'hidden' },
});
const ExtraSection = tasty({
    styles: {
        display: 'flex',
        alignItems: 'center',
        opacity: { '': 0, show: 1 },
        transition: 'opacity 0.2s ease-out',
    },
});
const ExpandArrowSection = tasty({
    styles: {
        display: 'grid',
        placeContent: 'center',
        gridArea: 'icon',
        width: '2x',
        height: '2x',
        fontSize: '2x',
        transform: { '': 'rotate(0)', expanded: 'rotate(-90deg)' },
        transition: 'transform 0.2s ease-out',
        transformOrigin: 'center',
    },
});
export function AccordionItemTitle(props) {
    const { qa, title, subtitle, extra, onExpand, isExpanded, contentID, titleID, size, showExtra, styles, } = props;
    const [isFocusWithin, setIsFocusWithin] = useState(false);
    const [isFocused, setIsFocused] = useState(false);
    const { hoverProps, isHovered } = useHover({});
    const { isFocusVisible } = useFocusVisible({});
    const { focusProps } = useFocus({ onFocusChange: setIsFocused });
    const { focusWithinProps } = useFocusWithin({
        onFocusWithinChange: setIsFocusWithin,
    });
    const { pressProps } = usePress({ onPress: onExpand });
    const shouldShowFocus = isFocusVisible && isFocused;
    const hasUserHovered = isHovered || shouldShowFocus || (isFocusWithin && isFocusVisible);
    return (_jsxs(StyledAccordionItemTitleWrap, { qa: qa, "data-size": size, "aria-labelledby": titleID, mods: { subtitle: !!subtitle }, styles: styles, ...hoverProps, children: [_jsxs(StyledAccordionItemTitle, { ...mergeProps(focusProps, pressProps, focusWithinProps), mods: { focused: shouldShowFocus }, "aria-expanded": isExpanded, "aria-controls": contentID, role: "button", tabIndex: "0", "data-size": size, children: [_jsx(AccordionItemIcon, { isExpanded: isExpanded }), _jsx(AccordionItemContent, { title: title, id: titleID })] }), subtitle ? _jsx("div", { "data-element": "Subtitle", children: subtitle }) : null, _jsx(AccordionItemExtra, { showExtra: showExtra, isHovered: hasUserHovered, children: extra })] }));
}
const AccordionItemIcon = memo(function StyledAccordionItemIcon(props) {
    const { isExpanded } = props;
    return (_jsx(ExpandArrowSection, { mods: { expanded: isExpanded }, children: _jsx(Arrow, { direction: "right" }) }));
});
const AccordionItemContent = memo(function AccordionItemContent(props) {
    const { id, title } = props;
    return (_jsx(TitleSection, { id: id, children: _jsx(Text, { ellipsis: true, preset: "h6", children: title }, "text") }));
});
function AccordionItemExtra(props) {
    const { children, showExtra, isHovered } = props;
    if (!children) {
        return null;
    }
    const show = shouldShowExtra(showExtra, isHovered);
    return _jsx(ExtraSection, { mods: { show }, children: children });
}
function shouldShowExtra(showExtra, isHovered) {
    if (typeof showExtra === 'boolean') {
        return showExtra;
    }
    return isHovered;
}
//# sourceMappingURL=AccordionItemTitle.js.map