import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Menu, MenuTrigger, MoreIcon, tasty } from '@cube-dev/ui-kit';
import { useMemo } from 'react';
const OptionsButton = tasty(Button, {
    qa: 'FilterOptionsButton',
    'aria-label': 'Filter options',
    size: 'small',
    type: 'secondary',
    icon: _jsx(MoreIcon, {}),
    styles: {
        width: '3x',
    },
});
export function FilterOptionsButton({ type, disableKeys, onAction }) {
    const items = useMemo(() => {
        const items = [];
        if (type === 'or' || type === 'and') {
            if (type === 'and') {
                items.push({
                    key: 'convert',
                    label: 'Convert to OR Branch',
                });
            }
            if (type === 'or') {
                items.push({
                    key: 'convert',
                    label: 'Convert to AND Branch',
                });
            }
            items.push({
                key: 'unwrap',
                label: 'Unwrap Branch',
            });
        }
        if (type === 'member' || type === 'or' || type === 'and') {
            items.push({
                key: 'wrapWithOr',
                label: 'Wrap with OR Branch',
            });
            items.push({
                key: 'wrapWithAnd',
                label: 'Wrap with AND Branch',
            });
        }
        items.push({
            key: 'remove',
            label: 'Remove',
            color: '#danger',
        });
        return items.filter((item) => !disableKeys?.includes(item.key));
    }, [type, disableKeys]);
    return (_jsxs(MenuTrigger, { children: [_jsx(OptionsButton, {}), _jsx(Menu, { onAction: (key) => onAction(key), children: items.map((item) => (_jsx(Menu.Item, { color: item.color, children: item.label }, item.key))) })] }));
}
//# sourceMappingURL=FilterOptionsButton.js.map