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 { ListItem } from '../list';
import { cs } from '../utils';
import AccordionItemArrow from './accordionItemArrow';
import { useAccordionContext } from './context';
/** An accordion item. */
export const AccordionItem = (props) => {
    const { className, children, collapsed, content, disabled, id, iconPosition = 'end', 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 isIconStart = iconPosition === 'start';
    const isIconEnd = iconPosition === 'end';
    return (_jsxs(ListItem, { borderBottom: "1px solid transparent", borderColor: styles.item.borderColor, className: cs('vui-accordion-item', className), color: "yellow", disabled: disabled, disabledBg: styles.item.disabledBg, disabledColor: styles.item.disabledColor, flexDirection: "column", h: "auto", id: `${id}`, p: 0, w: "100%", ...rest, children: [_jsxs(Box, { color: "yellow", cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: disabled
                    ? 'transparent'
                    : collapsedInternal
                        ? styles.item.itemTitleHoverBg
                        : styles.item.expandedItemTitleHoverBg, justifyContent: iconPosition === 'start' ? 'initial' : 'space-between', onClick: toggle, px: 2, w: "100%", ...styles.item, children: [isIconStart && (_jsx(Box, { children: _jsx(AccordionItemArrow, { collapsed: collapsedInternal, color: styles.icon.color }) })), _jsx(Box, { fontWeight: typeof title === 'string' ? '500' : 'inherit', ml: isIconStart ? 2 : 0, opacity: disabled ? 0.5 : 1, children: title }), isIconEnd && (_jsx(Box, { children: _jsx(AccordionItemArrow, { collapsed: collapsedInternal, color: styles.icon.color, disabled: disabled }) }))] }), !collapsedInternal && (_jsx(Box, { mb: 2, mt: 2, px: 2, py: 1, w: "100%", children: children ?? content }))] }));
};
AccordionItem.displayName = 'AccordionItem';
export default AccordionItem;
//# sourceMappingURL=accordionItem.js.map