import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, DropdownMenu, Text } from '@gravity-ui/uikit';
import { useFormContext } from "../../hooks/FormContext.js";
import { formBuilderCn } from "../../utils/cn.js";
import { AddPropertyButton } from "../AddPropertyButton/AddPropertyButton.js";
import { ConfigRow } from "../ConfigRow/ConfigRow.js";
import { SectionHeader } from "../SectionHeader/SectionHeader.js";
import './ArrayFieldRenderer.css';
const b = formBuilderCn('array-field-renderer');
export const ArrayFieldRenderer = ({ field, fieldName: _fieldName, inputTypeMenuItems, renderNestedField, }) => {
    const { addObjectProperty, updateField } = useFormContext();
    return (_jsxs("div", { className: b('config'), children: [_jsxs("div", { className: b('config-row'), children: [_jsx(Text, { variant: "body-2", children: "Array Type:" }), _jsx(DropdownMenu, { items: [
                            {
                                action: () => updateField(field.id, { arrayType: 'text' }),
                                text: 'Text',
                            },
                            {
                                action: () => updateField(field.id, { arrayType: 'object' }),
                                text: 'Object',
                            },
                        ], renderSwitcher: (props) => (_jsx(Button, { ...props, view: "normal", size: "s", children: field.arrayType === 'object' ? 'Object' : 'Text' })) })] }), _jsx(ConfigRow, { label: "Button Text", value: field.buttonText, onUpdate: (value) => updateField(field.id, { buttonText: value }) }), field.arrayType === 'object' && (_jsxs("div", { className: b('nested-fields'), children: [_jsx(SectionHeader, { title: "Properties:" }), field?.properties?.map((property, index) => renderNestedField(property, index, field.id)), _jsx(AddPropertyButton, { inputTypeMenuItems: inputTypeMenuItems, onAdd: (type) => addObjectProperty(field.id, type) })] }))] }));
};
//# sourceMappingURL=ArrayFieldRenderer.js.map
