import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import Box from '../box';
import { omitThemingProps, useStyleConfig } from '../core';
import { cs } from '../utils';
import AccordionItemArrow from './accordionItemArrow';
import { useAccordionContext } from './context';
/** An accordion item (horizontal AccordionOrientation). */
export const AccordionItemHorizontal = (props) => {
    const { className, children, collapsed, content, disabled, id, contentPx, title, onToggle, ...rest } = omitThemingProps(props);
    const [collapsedInternal, setIsCollapsedInternal] = useState(false);
    const styles = useStyleConfig('Accordion', useAccordionContext());
    useEffect(() => {
        setIsCollapsedInternal(!!collapsed);
    }, [collapsed]);
    const toggle = () => {
        if (!disabled) {
            onToggle?.({ id, collapsed: !collapsedInternal });
            setIsCollapsedInternal(!collapsedInternal);
        }
    };
    const cursor = disabled ? 'not-allowed' : 'pointer';
    const fontWeight = typeof title === 'string' ? '500' : 'inherit';
    const expandedContentPx = contentPx ? contentPx : styles.item.pt;
    return (_jsxs(Box, { alignItems: collapsedInternal ? 'normal' : 'baseline', bg: disabled ? 'disabled.bg' : undefined, borderRight: "1px solid transparent", className: cs('vui-accordion-item-horizontal', className), color: disabled ? 'disabled.color' : undefined, column: true, cursor: disabled ? 'not-allowed' : undefined, id: `${id}`, maxW: collapsedInternal ? styles.item.minH : 'auto', minW: styles.item.minH, transitionDuration: "0ms", userSelect: disabled ? 'none' : undefined, ...styles.item, p: 0, ...rest, children: [_jsxs(Box, { cursor: cursor, hoverBg: disabled
                    ? 'transparent'
                    : collapsedInternal
                        ? styles.item.itemTitleHoverBg
                        : styles.item.expandedItemTitleHoverBg, justifyContent: "space-between", minH: styles.item.minH, onClick: toggle, p: styles.item.pt, w: "100%", children: [!collapsedInternal && (_jsx(Box, { fontWeight: fontWeight, opacity: disabled ? 0.5 : 1, children: title })), _jsx(AccordionItemArrow, { collapsed: collapsedInternal, color: styles.icon.color, disabled: disabled, orientation: "horizontal" })] }), !collapsedInternal ? (_jsx(Box, { p: styles.item.pt, pt: 0, px: expandedContentPx, transitionDuration: "0ms", w: 1, children: children ?? content })) : (_jsx(Box, { cursor: cursor, flexDirection: "row-reverse", fontWeight: fontWeight, mb: styles.item.minH, mt: styles.item.pt, onClick: toggle, transform: "rotate(-90deg)", transitionDuration: "0ms", whiteSpace: "nowrap", children: title }))] }));
};
AccordionItemHorizontal.displayName = 'AccordionItemHorizontal';
export default AccordionItemHorizontal;
//# sourceMappingURL=accordionItemHorizontal.js.map