import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { useState, useCallback } from 'react';
import classNames from '../../_virtual/index.js';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty.js';
import Icon from '../Icon/Icon.js';
import Typography from '../Typography/Typography.js';
import Tooltip from '../Tooltip/Tooltip.js';

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, tooltipTitle = '', }) => {
    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 (jsx(Fragment, { children: 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: [jsx(Tooltip, { title: tooltipTitle, disabled: !disable, children: jsxs(Typography, { className: `ff-label-chip ff-label-chip--${variant} ff-expandable-chip-menu--${size}`, onClick: toggleExpand, cursor: disable ? 'not-allowed' : 'pointer', 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(Tooltip, { title: tooltipTitle, disabled: !disable, children: jsx(Typography, { className: classNames('ff-sub-chip', `ff-sub-chip--${variant}`, `ff-sub-chip--${size}`, {
                                selected: selectedMenu === chip,
                            }), onClick: () => handleSelectedMenu(chip), cursor: disable ? 'not-allowed' : 'pointer', children: chip }, index) }))) }))] }) }));
};

export { ExpandableMenu as default };
//# sourceMappingURL=ExpandableMenu.js.map
