import React, { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { Box, DropdownBase, Input, FormField, listItemSelectBuilder, TextButton, } from '@wix/design-system';
import { getOperatorLabel, } from '@wix/bex-core';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useOperatorFilterState } from '../../hooks/useOperatorFilterState';
import { ChevronDown } from '@wix/wix-ui-icons-common';
function _OperatorFilterPicker(props) {
    const { filter, allowedOperators } = props;
    const { translate: t } = useWixPatternsContainer();
    const state = useOperatorFilterState({
        filter,
        allowedOperators,
    });
    useEffect(() => state.init(), [state]);
    const operatorOptions = allowedOperators.map((op) => listItemSelectBuilder({
        id: op,
        title: t(getOperatorLabel(op)),
        label: t(getOperatorLabel(op)),
    }));
    const showValueInput = state.operatorNeedsValue();
    return (React.createElement(Box, { dataHook: `operator-picker-${filter.name}`, direction: "vertical", gap: "12px" },
        React.createElement(FormField, null,
            React.createElement(DropdownBase, { options: operatorOptions, selectedId: state.operator, onSelect: (option) => state.setOperator(option.id), dataHook: "operator-picker-operator-dropdown" }, ({ toggle }) => (React.createElement(TextButton, { skin: "dark", onClick: toggle, suffixIcon: React.createElement(ChevronDown, null), size: "small", dataHook: "operator-picker-trigger" }, t(getOperatorLabel(state.operator)))))),
        showValueInput && (React.createElement(FormField, null,
            React.createElement(Input, { border: 'round', value: state.value?.toString() || '', placeholder: t('cairo.filterOperator.valuePlaceholder'), onChange: (e) => state.setValue(e.target.value), onBlur: () => state.applyImmediately(), onKeyDown: (e) => {
                    if (e.key === 'Enter') {
                        state.applyImmediately();
                    }
                }, dataHook: "operator-picker-value-input" })))));
}
export const OperatorFilterPicker = observer(_OperatorFilterPicker);
//# sourceMappingURL=OperatorFilterPicker.js.map