"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SectionSettings = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const uikit_1 = require("@gravity-ui/uikit");
const fieldNames_1 = require("../../../utils/fieldNames.js");
const Row_1 = require("./Row.js");
const SectionSettings = ({ field, updateField, whenEditorSection }) => {
    const isArray = Boolean(field.index);
    const handleArrayModeToggle = (value) => {
        if (value) {
            updateField(field.id, {
                index: 'index',
                withAddButton: true,
                itemTitle: 'Item {{index}}',
                itemView: 'card',
                fields: (0, fieldNames_1.transformChildNames)(field.fields, fieldNames_1.prefixNameForArrayMode),
            });
        }
        else {
            updateField(field.id, {
                index: undefined,
                withAddButton: undefined,
                itemTitle: undefined,
                itemView: undefined,
                fields: (0, fieldNames_1.transformChildNames)(field.fields, fieldNames_1.stripArrayModePrefix),
            });
        }
    };
    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Title", children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: field.title ?? '', onUpdate: (value) => updateField(field.id, { title: value }), placeholder: "Section heading" }) }), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Opened", children: (0, jsx_runtime_1.jsx)(uikit_1.Switch, { checked: Boolean(field.opened), onUpdate: (value) => updateField(field.id, { opened: value }), children: "Expanded by default" }) }), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Array mode", children: (0, jsx_runtime_1.jsx)(uikit_1.Switch, { checked: isArray, onUpdate: handleArrayModeToggle, children: "Repeating group (array of items)" }) }), isArray && ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Hint", children: (0, jsx_runtime_1.jsxs)(uikit_1.Text, { variant: "caption-2", color: "hint", children: ["Child field names must include ", (0, jsx_runtime_1.jsx)("code", { children: '{{index}}' }), " so each row gets its own value. New fields get an ", (0, jsx_runtime_1.jsx)("code", { children: 'items[{{index}}].' }), ' ', "prefix automatically."] }) }), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Index name", children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: field.index ?? '', onUpdate: (value) => updateField(field.id, { index: value || 'index' }), placeholder: "index" }) }), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Item title", children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: field.itemTitle ?? '', onUpdate: (value) => updateField(field.id, { itemTitle: value || undefined }), placeholder: "Item {{index}}" }) }), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Item view", children: (0, jsx_runtime_1.jsx)(uikit_1.Select, { size: "m", value: [field.itemView ?? 'clear'], options: [
                                { value: 'clear', content: 'Clear (flat)' },
                                { value: 'card', content: 'Card (bordered)' },
                            ], onUpdate: (next) => updateField(field.id, {
                                itemView: next[0],
                            }) }) }), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Add button", children: (0, jsx_runtime_1.jsx)(uikit_1.Checkbox, { checked: Boolean(field.withAddButton), onUpdate: (value) => updateField(field.id, { withAddButton: value }), children: "Show \u201CAdd item\u201D button" }) })] })), whenEditorSection] }));
};
exports.SectionSettings = SectionSettings;
//# sourceMappingURL=SectionSettings.js.map
