"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.OptionsSettings = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const cn_1 = require("../../../utils/cn.js");
const Row_1 = require("./Row.js");
const b = (0, cn_1.formBuilderV2Cn)('field-settings');
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 ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [commonRows, (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Default", children: (0, jsx_runtime_1.jsx)(uikit_1.Select, { size: "m", value: [field.defaultValue ?? ''], options: defaultValueOptions, onUpdate: (next) => {
                        const value = next[0];
                        updateField(field.id, { defaultValue: value || undefined });
                    } }) }), field.type === 'select' && ((0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Has clear", children: (0, jsx_runtime_1.jsx)(uikit_1.Checkbox, { checked: Boolean(field.hasClear), onUpdate: (value) => updateField(field.id, { hasClear: value }), children: "Allow clearing the selection" }) })), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Options", children: (0, jsx_runtime_1.jsxs)("div", { className: b('options'), children: [options.map((opt, index) => ((0, jsx_runtime_1.jsxs)("div", { className: b('option-row'), children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { size: "s", value: opt.value, onUpdate: (value) => updateOption(index, 'value', value), placeholder: "value" }), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { size: "s", value: opt.content ?? '', onUpdate: (value) => updateOption(index, 'content', value), placeholder: "label" }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { size: "s", view: "flat-danger", disabled: options.length <= 1, onClick: () => removeOption(index), title: "Remove option", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin, size: 12 }) })] }, index))), (0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('add-option'), size: "s", view: "normal", onClick: addOption, children: "+ Add option" })] }) }), whenEditorSection] }));
};
exports.OptionsSettings = OptionsSettings;
//# sourceMappingURL=OptionsSettings.js.map
