import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from '@gravity-ui/uikit';
import { useFormContext } from "../../hooks/FormContext.js";
import { formBuilderCn } from "../../utils/cn.js";
import { AddPropertyButton } from "../AddPropertyButton/AddPropertyButton.js";
import { OptionHeader } from "../OptionHeader/OptionHeader.js";
import { SectionHeader } from "../SectionHeader/SectionHeader.js";
import './OptionsRenderer.css';
const b = formBuilderCn('options-renderer');
export const OptionsRenderer = ({ field, fieldName: _fieldName, inputTypeMenuItems, renderNestedField, }) => {
    const { addOptionProperty, addOption, removeOption } = useFormContext();
    return (_jsxs("div", { className: b('nested-fields'), children: [_jsxs("div", { className: b('header'), children: [_jsx(SectionHeader, { title: "Options:" }), _jsx(Button, { view: "normal", size: "s", onClick: () => {
                            addOption(field.id);
                        }, className: b('add-option-button'), children: "+ Add Option" })] }), field.options.map((option, optionIndex) => (_jsxs("div", { className: b('option'), children: [_jsxs("div", { className: b('option-header'), children: [_jsx(OptionHeader, { title: option.title }), field.options.length > 1 && (_jsx(Button, { view: "normal", size: "xs", onClick: () => {
                                    removeOption(field.id, optionIndex);
                                }, className: b('remove-option-button'), children: "Remove" }))] }), _jsxs("div", { className: b('nested-fields'), children: [_jsx(SectionHeader, { title: "Properties:", variant: "body-2" }), option.properties.map((property, propIndex) => renderNestedField(property, propIndex, field.id, optionIndex)), _jsx(AddPropertyButton, { inputTypeMenuItems: inputTypeMenuItems, onAdd: (type) => {
                                    addOptionProperty(field.id, optionIndex, type);
                                } })] })] }, `option_${optionIndex}`)))] }));
};
//# sourceMappingURL=OptionsRenderer.js.map
