import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Checkbox, Select, Switch, Text, TextInput } from '@gravity-ui/uikit';
import { prefixNameForArrayMode, stripArrayModePrefix, transformChildNames, } from "../../../utils/fieldNames.js";
import { Row } from "./Row.js";
export 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: transformChildNames(field.fields, prefixNameForArrayMode),
            });
        }
        else {
            updateField(field.id, {
                index: undefined,
                withAddButton: undefined,
                itemTitle: undefined,
                itemView: undefined,
                fields: transformChildNames(field.fields, stripArrayModePrefix),
            });
        }
    };
    return (_jsxs(React.Fragment, { children: [_jsx(Row, { label: "Title", children: _jsx(TextInput, { value: field.title ?? '', onUpdate: (value) => updateField(field.id, { title: value }), placeholder: "Section heading" }) }), _jsx(Row, { label: "Opened", children: _jsx(Switch, { checked: Boolean(field.opened), onUpdate: (value) => updateField(field.id, { opened: value }), children: "Expanded by default" }) }), _jsx(Row, { label: "Array mode", children: _jsx(Switch, { checked: isArray, onUpdate: handleArrayModeToggle, children: "Repeating group (array of items)" }) }), isArray && (_jsxs(React.Fragment, { children: [_jsx(Row, { label: "Hint", children: _jsxs(Text, { variant: "caption-2", color: "hint", children: ["Child field names must include ", _jsx("code", { children: '{{index}}' }), " so each row gets its own value. New fields get an ", _jsx("code", { children: 'items[{{index}}].' }), ' ', "prefix automatically."] }) }), _jsx(Row, { label: "Index name", children: _jsx(TextInput, { value: field.index ?? '', onUpdate: (value) => updateField(field.id, { index: value || 'index' }), placeholder: "index" }) }), _jsx(Row, { label: "Item title", children: _jsx(TextInput, { value: field.itemTitle ?? '', onUpdate: (value) => updateField(field.id, { itemTitle: value || undefined }), placeholder: "Item {{index}}" }) }), _jsx(Row, { label: "Item view", children: _jsx(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],
                            }) }) }), _jsx(Row, { label: "Add button", children: _jsx(Checkbox, { checked: Boolean(field.withAddButton), onUpdate: (value) => updateField(field.id, { withAddButton: value }), children: "Show \u201CAdd item\u201D button" }) })] })), whenEditorSection] }));
};
//# sourceMappingURL=SectionSettings.js.map
