import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Icon from '../../Icon';
import './ExcelContextMenu.scss';
import Typography from '../../Typography';
import Tooltip from '../../Tooltip'; // Assuming you have a Tooltip component
const ExcelContextMenu = ({ contextMenu, position, editable, disableDeleteOption, }) => {
    const checkDelete = (label) => {
        return label.includes('Delete');
    };
    const isOptionDisabled = (option) => {
        return option.disable || (checkDelete(option.label) && disableDeleteOption);
    };
    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 = isOptionDisabled(option);
                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 default ExcelContextMenu;
//# sourceMappingURL=ExcelContextMenu.js.map