import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { TrashBin } from '@gravity-ui/icons';
import { Button, Icon, Select, TextInput } from '@gravity-ui/uikit';
import { formBuilderV2Cn } from "../../utils/cn.js";
import { COMBINATOR_OPTIONS, OPERATOR_OPTIONS, coerceValue, displayValue, parse, serialize, } from "./utils.js";
import './WhenEditor.css';
const b = formBuilderV2Cn('when-editor');
export const WhenEditor = ({ when, availableFields, onChange }) => {
    const { conditions, combinators } = parse(when);
    const fieldOptions = React.useMemo(() => availableFields.map((name) => ({ value: name, content: name })), [availableFields]);
    const commit = (nextConditions, nextCombinators) => {
        onChange(serialize(nextConditions, nextCombinators));
    };
    const addCondition = () => {
        const nextConditions = [
            ...conditions,
            { field: availableFields[0] ?? '', operator: '===', value: '' },
        ];
        const nextCombinators = conditions.length === 0 ? combinators : [...combinators, { operator: '&&' }];
        commit(nextConditions, nextCombinators);
    };
    const removeCondition = (index) => {
        const nextConditions = conditions.filter((_, i) => i !== index);
        const nextCombinators = index === 0
            ? combinators.slice(1)
            : [...combinators.slice(0, index - 1), ...combinators.slice(index)];
        commit(nextConditions, nextCombinators);
    };
    const updateCondition = (index, patch) => {
        const nextConditions = conditions.map((c, i) => (i === index ? { ...c, ...patch } : c));
        commit(nextConditions, combinators);
    };
    const updateCombinator = (index, op) => {
        const nextCombinators = combinators.map((c, i) => (i === index ? { operator: op } : c));
        commit(conditions, nextCombinators);
    };
    const clearAll = () => {
        onChange(undefined);
    };
    if (conditions.length === 0) {
        return (_jsx("div", { className: b(), children: _jsx(Button, { view: "normal", size: "s", onClick: addCondition, children: "+ Add condition" }) }));
    }
    return (_jsxs("div", { className: b(), children: [conditions.map((cond, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("div", { className: b('combinator'), children: _jsx(Select, { size: "s", value: [combinators[i - 1]?.operator ?? '&&'], options: COMBINATOR_OPTIONS, onUpdate: (next) => updateCombinator(i - 1, next[0]), width: 80 }) })), _jsxs("div", { className: b('condition'), children: [_jsx(Select, { size: "s", value: [cond.field], options: fieldOptions, onUpdate: (next) => updateCondition(i, { field: next[0] ?? '' }), placeholder: "field", filterable: true, width: "max" }), _jsx(Select, { size: "s", value: [cond.operator], options: OPERATOR_OPTIONS, onUpdate: (next) => updateCondition(i, { operator: next[0] }), width: 80 }), _jsx(TextInput, { size: "s", value: displayValue(cond.value), onUpdate: (value) => updateCondition(i, { value: coerceValue(value) }), placeholder: 'value ("true"/"false" \u2192 bool)' }), _jsx(Button, { view: "flat-danger", size: "s", onClick: () => removeCondition(i), title: "Remove condition", children: _jsx(Icon, { data: TrashBin, size: 12 }) })] })] }, i))), _jsxs("div", { className: b('actions'), children: [_jsx(Button, { view: "normal", size: "s", onClick: addCondition, children: "+ Add condition" }), _jsx(Button, { view: "flat", size: "s", onClick: clearAll, children: "Clear" })] })] }));
};
//# sourceMappingURL=WhenEditor.js.map
