import * as React from 'react';
import { Box, Flex } from 'rebass';
import Panel from '../../../../components/Panel';
import SimpleButton from '../../../../components/SimpleButton';
const ColumnFilterMenuItem = ({ active, onClick, icon, label, }) => {
    return (React.createElement(SimpleButton, { p: 1, variant: "text", width: "100%", tone: active ? 'info' : 'none', onClick: onClick },
        React.createElement(Box, { mr: 2 }, icon),
        React.createElement(Box, { fontSize: 2 }, label)));
};
export const ColumnFilterMenu = (props) => {
    return (React.createElement(Panel, { minWidth: "max-content" }, props.predicateDefs?.map((predicateDef, index) => {
        return (React.createElement(Flex, { mb: 1, key: index, onMouseDownCapture: (e) => {
                e.stopPropagation();
            } },
            React.createElement(ColumnFilterMenuItem, { onClick: () => props.onPredicateChange({ operator: predicateDef.operator, args: [] }), icon: predicateDef.icon, label: predicateDef.label, active: props.predicate.operator === predicateDef.operator })));
    })));
};
