"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidemenuItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const box_1 = __importDefault(require("../box"));
const button_1 = __importDefault(require("../button"));
const core_1 = require("../core");
const icon_1 = __importDefault(require("../icon"));
const popover_1 = require("../popover");
const t_1 = __importDefault(require("../t"));
const utils_1 = require("../utils");
const useSidemenuItem_1 = __importDefault(require("./useSidemenuItem"));
/** A menu item. */
exports.SidemenuItem = (0, core_1.vui)((props, ref) => {
    const _a = (0, core_1.omitThemingProps)(props), { className, children, icon, iconSize = 'md', isActive, isExpanded = true, onClick, onCollapse, onExpand, title } = _a, rest = __rest(_a, ["className", "children", "icon", "iconSize", "isActive", "isExpanded", "onClick", "onCollapse", "onExpand", "title"]);
    const { isExpandedVertically, setIsExpandedVertically, isDark, size, isExpandedHorizontally, styles } = (0, useSidemenuItem_1.default)(isExpanded);
    (0, react_1.useEffect)(() => {
        if (isExpandedVertically)
            onExpand === null || onExpand === void 0 ? void 0 : onExpand();
        if (!isExpandedVertically)
            onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse();
    }, [isExpandedVertically]);
    const hasChildrenExpanded = !!children && isExpandedHorizontally;
    const innerContent = ((0, jsx_runtime_1.jsxs)(box_1.default, { centerV: true, px: 2, py: 1, w: "100%", whiteSpace: "pre", children: [(0, jsx_runtime_1.jsx)(icon_1.default, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize }), (0, jsx_runtime_1.jsx)(t_1.default, { isTruncated: true, ml: 2, children: title })] }));
    const toggle = (e) => {
        e.preventDefault();
        e.stopPropagation();
        setIsExpandedVertically(!isExpandedVertically);
    };
    const buttonStyles = Object.assign(Object.assign(Object.assign({ 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 === null || onClick === void 0 ? void 0 : 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 ((0, jsx_runtime_1.jsxs)(box_1.default, { flexDirection: "column", ref: ref, w: "100%", children: [!hasChildrenExpanded && children ? ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { offset: [0, 0], placement: "right-start", trigger: "mouseenter", children: [(0, jsx_runtime_1.jsx)(popover_1.Popover.Trigger, { as: box_1.default, className: (0, utils_1.cs)('vui-sidemenu-item-popover', className), children: (0, jsx_runtime_1.jsx)(box_1.default, Object.assign({}, buttonStyles, { borderLeft: `3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`, children: innerContent })) }), (0, jsx_runtime_1.jsx)(popover_1.Popover.Content, { shadow: "none", children: (0, jsx_runtime_1.jsx)(box_1.default, { flexDirection: "column", justifyContent: "start", w: "100%", children: children }) })] })) : ((0, jsx_runtime_1.jsxs)(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-sidemenu-item', className) }, buttonStyles, { children: [innerContent, hasChildrenExpanded && ((0, jsx_runtime_1.jsx)(button_1.default, { "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 && ((0, jsx_runtime_1.jsx)(box_1.default, { flexDirection: "column", justifyContent: "start", w: "100%", children: children }))] }));
});
exports.SidemenuItem.displayName = 'SidemenuItem';
exports.default = exports.SidemenuItem;
//# sourceMappingURL=sidemenuItem.js.map