import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { TrashBin } from '@gravity-ui/icons';
import { Button, Checkbox, Icon, Select, TextInput } from '@gravity-ui/uikit';
import { formBuilderV2Cn } from "../../../utils/cn.js";
import { Row } from "./Row.js";
const b = formBuilderV2Cn('field-settings');
export const OptionsSettings = ({ field, updateField, commonRows, whenEditorSection, }) => {
    const options = field.options ?? [];
    const updateOption = (index, key, value) => {
        const next = options.map((opt, i) => (i === index ? { ...opt, [key]: value } : opt));
        updateField(field.id, { options: next });
    };
    const removeOption = (index) => {
        const next = options.filter((_, i) => i !== index);
        updateField(field.id, { options: next });
    };
    const addOption = () => {
        const nextIndex = options.length + 1;
        updateField(field.id, {
            options: [...options, { value: `option${nextIndex}`, content: `Option ${nextIndex}` }],
        });
    };
    const defaultValueOptions = [
        { value: '', content: '— none —' },
        ...options.map((o) => ({ value: o.value, content: o.content ?? o.value })),
    ];
    return (_jsxs(React.Fragment, { children: [commonRows, _jsx(Row, { label: "Default", children: _jsx(Select, { size: "m", value: [field.defaultValue ?? ''], options: defaultValueOptions, onUpdate: (next) => {
                        const value = next[0];
                        updateField(field.id, { defaultValue: value || undefined });
                    } }) }), field.type === 'select' && (_jsx(Row, { label: "Has clear", children: _jsx(Checkbox, { checked: Boolean(field.hasClear), onUpdate: (value) => updateField(field.id, { hasClear: value }), children: "Allow clearing the selection" }) })), _jsx(Row, { label: "Options", children: _jsxs("div", { className: b('options'), children: [options.map((opt, index) => (_jsxs("div", { className: b('option-row'), children: [_jsx(TextInput, { size: "s", value: opt.value, onUpdate: (value) => updateOption(index, 'value', value), placeholder: "value" }), _jsx(TextInput, { size: "s", value: opt.content ?? '', onUpdate: (value) => updateOption(index, 'content', value), placeholder: "label" }), _jsx(Button, { size: "s", view: "flat-danger", disabled: options.length <= 1, onClick: () => removeOption(index), title: "Remove option", children: _jsx(Icon, { data: TrashBin, size: 12 }) })] }, index))), _jsx(Button, { className: b('add-option'), size: "s", view: "normal", onClick: addOption, children: "+ Add option" })] }) }), whenEditorSection] }));
};
//# sourceMappingURL=OptionsSettings.js.map
