import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
import Box from '../box';
import Button from '../button';
import { omitThemingProps, vui } from '../core';
import Icon from '../icon';
import { Popover } from '../popover';
import T from '../t';
import { cs } from '../utils';
import useSidemenuItem from './useSidemenuItem';
/** A menu item. */
export const SidemenuItem = vui((props, ref) => {
    const { className, children, icon, iconSize = 'md', isActive, isExpanded = true, onClick, onCollapse, onExpand, title, ...rest } = omitThemingProps(props);
    const { isExpandedVertically, setIsExpandedVertically, isDark, size, isExpandedHorizontally, styles } = useSidemenuItem(isExpanded);
    useEffect(() => {
        if (isExpandedVertically)
            onExpand?.();
        if (!isExpandedVertically)
            onCollapse?.();
    }, [isExpandedVertically]);
    const hasChildrenExpanded = !!children && isExpandedHorizontally;
    const innerContent = (_jsxs(Box, { centerV: true, px: 2, py: 1, w: "100%", whiteSpace: "pre", children: [_jsx(Icon, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize }), _jsx(T, { isTruncated: true, ml: 2, children: title })] }));
    const toggle = (e) => {
        e.preventDefault();
        e.stopPropagation();
        setIsExpandedVertically(!isExpandedVertically);
    };
    const buttonStyles = {
        alignItems: 'center',
        border: 'none',
        borderRadius: 0,
        borderLeft: !hasChildrenExpanded && children ? 'none' : '3px solid transparent',
        borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined,
        bg: isDark ? 'darkBlue.main' : isActive ? 'skyBlue.95' : 'white',
        color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10',
        h: 'auto',
        justifyContent: 'space-between',
        onClick: () => onClick?.(),
        p: 0,
        size: 'md',
        variant: isDark ? 'tertiaryLight' : 'tertiaryDark',
        w: '100%',
        ...styles.item,
        minH: size === 'lg' ? '56px' : '40px',
        hoverBg: isDark ? 'seaBlue.main' : 'skyBlue.90',
        ...rest,
    };
    return (_jsxs(Box, { flexDirection: "column", ref: ref, w: "100%", children: [!hasChildrenExpanded && children ? (_jsxs(Popover, { offset: [0, 0], placement: "right-start", trigger: "mouseenter", children: [_jsx(Popover.Trigger, { as: Box, className: cs('vui-sidemenu-item-popover', className), children: _jsx(Box, { ...buttonStyles, borderLeft: `3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`, children: innerContent }) }), _jsx(Popover.Content, { shadow: "none", children: _jsx(Box, { flexDirection: "column", justifyContent: "start", w: "100%", children: children }) })] })) : (_jsxs(Button, { className: cs('vui-sidemenu-item', className), ...buttonStyles, children: [innerContent, hasChildrenExpanded && (_jsx(Button, { "aria-label": isExpandedVertically ? 'Collapse' : 'Expand', className: "vui-sidemenu-item-expand", icon: isExpandedVertically ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "sm", variant: isDark ? 'tertiaryLight' : 'tertiaryDark' }))] })), !!children && hasChildrenExpanded && isExpandedVertically && (_jsx(Box, { flexDirection: "column", justifyContent: "start", w: "100%", children: children }))] }));
});
SidemenuItem.displayName = 'SidemenuItem';
export default SidemenuItem;
//# sourceMappingURL=sidemenuItem.js.map