import { jsx, jsxs } from 'react/jsx-runtime';
import Icon from '../../Icon/Icon.js';
import Typography from '../../Typography/Typography.js';
import Tooltip from '../../Tooltip/Tooltip.js';

const ExcelContextMenu = ({ contextMenu, position, editable, }) => {
    if (!contextMenu.open)
        return null;
    const checkDelete = (label) => {
        return label.includes('Delete');
    };
    return (editable && (jsx("div", { onContextMenu: (event) => {
            event.preventDefault();
            event.stopPropagation();
        }, className: "ff-excel-menu", style: {
            left: position.x,
            top: position.y,
            position: 'absolute',
            zIndex: 9999999999,
        }, children: contextMenu.options.map((option) => {
            if (!option.visible) {
                const disabled = option.disable;
                return (jsx(Tooltip, { title: disabled ? option.disableTooltip : '', children: jsxs("div", { className: `ff-excel-menu-options ${disabled ? 'disabled' : ''}`, onClick: () => {
                            if (!disabled) {
                                option.action();
                            }
                        }, children: [option.iconName && (jsx(Icon, { name: option.iconName, height: 16, width: 16, color: checkDelete(option.label)
                                    ? 'var(--label-edit-error-text)'
                                    : 'var(--brand-color)', disabled: disabled })), jsx(Typography, { as: "label", children: option.label })] }) }, option.label));
            }
            return null;
        }) })));
};

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