import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from 'react';
import './ExpandableMenu.scss';
import classNames from 'classnames';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
import Icon from '../Icon';
import './ExpandableMenu.scss';
import Typography from '../Typography';
const ExpandableMenu = ({ label = '', icon = (_jsx(Icon, { name: "arrow_right", height: 5, width: 8, color: 'var(--icons-default-color)' })), variant = 'primary', size = 'medium', disable = false, subMenus = [], selectedMenu = '', onSubMenuClick = () => { }, menuExpandStatus }) => {
    const [isExpanded, setIsExpanded] = useState(menuExpandStatus || false);
    const [isHovered, setIsHovered] = useState(false);
    const toggleExpand = () => {
        setIsExpanded((prev) => !prev);
        setIsHovered(false);
    };
    const handleMouseEnter = useCallback(() => {
        if (!isExpanded)
            setIsHovered(true);
    }, [isExpanded]);
    const handleMouseLeave = useCallback(() => {
        if (!isExpanded)
            setIsHovered(false);
    }, [isExpanded]);
    const handleSelectedMenu = (chip) => {
        if (!disable) {
            onSubMenuClick(chip);
            setIsExpanded(true);
        }
    };
    const hasExpanded = isExpanded || isHovered;
    return (_jsxs("div", { className: classNames('ff-expandable-chip-menu', `ff-expandable-chip-menu--${variant}`, {
            'ff-expandable-chip-menu--disabled': disable,
            expanded: hasExpanded,
        }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs("div", { className: `ff-label-chip ff-label-chip--${variant} ff-expandable-chip-menu--${size}`, onClick: toggleExpand, children: [_jsx(Typography, { children: label }), _jsx("span", { className: "arrow-icon", children: icon })] }), hasExpanded && !checkEmpty(subMenus) && (_jsx("div", { className: classNames('ff-sub-chips', {
                    expanded: hasExpanded,
                }), children: subMenus.map((chip, index) => (_jsx("div", { className: classNames('ff-sub-chip', `ff-sub-chip--${variant}`, `ff-sub-chip--${size}`, {
                        selected: selectedMenu === chip,
                    }), onClick: () => handleSelectedMenu(chip), children: chip }, index))) }))] }));
};
export default ExpandableMenu;
//# sourceMappingURL=ExpandableMenu.js.map