import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Button, DropdownMenu, Text, TextInput } from '@gravity-ui/uikit';
import { useFormContext } from "../../hooks/FormContext.js";
import { formBuilderCn } from "../../utils/cn.js";
import './SelectFieldRenderer.css';
const b = formBuilderCn('select-field-renderer');
export const SelectFieldRenderer = ({ field }) => {
    const { updateField } = useFormContext();
    if (field.type !== 'select') {
        return null;
    }
    const view = field.view;
    const mode = field.mode;
    const enumValues = (field.enum || []);
    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('config-row'), children: [_jsx(Text, { variant: "body-2", children: "View:" }), _jsx(DropdownMenu, { items: [
                            {
                                action: () => updateField(field.id, { view: 'select' }),
                                text: 'Select',
                            },
                            {
                                action: () => updateField(field.id, { view: 'radiobutton' }),
                                text: 'Radio Button',
                            },
                        ], renderSwitcher: (props) => (_jsx(Button, { ...props, view: "normal", size: "s", children: view === 'radiobutton' ? 'Radio Button' : 'Select' })) })] }), _jsxs("div", { className: b('config-row'), children: [_jsx(Text, { variant: "body-2", children: "Mode:" }), _jsx(DropdownMenu, { items: [
                            {
                                action: () => updateField(field.id, { mode: 'single' }),
                                text: 'Single',
                            },
                            {
                                action: () => updateField(field.id, { mode: 'multiple' }),
                                text: 'Multiple',
                            },
                        ], renderSwitcher: (props) => (_jsx(Button, { ...props, view: "normal", size: "s", children: mode === 'multiple' ? 'Multiple' : 'Single' })) })] }), _jsxs("div", { className: b('config-row', { vertical: true }), children: [_jsx(Text, { variant: "body-2", className: b('options-title'), children: "Options:" }), enumValues.map((option, index) => (_jsxs("div", { className: b('enum-option'), children: [_jsxs("div", { className: b('config-row'), children: [_jsx(Text, { variant: "body-2", children: "Label:" }), _jsx(TextInput, { value: option.content, onUpdate: (value) => {
                                            const newEnum = [...enumValues];
                                            newEnum[index] = {
                                                ...newEnum[index],
                                                content: value,
                                            };
                                            updateField(field.id, { enum: newEnum });
                                        }, size: "s" })] }), _jsxs("div", { className: b('config-row'), children: [_jsx(Text, { variant: "body-2", children: "Value:" }), _jsx(TextInput, { value: option.value, onUpdate: (value) => {
                                            const newEnum = [...enumValues];
                                            newEnum[index] = {
                                                ...newEnum[index],
                                                value,
                                            };
                                            updateField(field.id, { enum: newEnum });
                                        }, size: "s" })] }), _jsx(Button, { view: "flat-danger", size: "xs", onClick: () => {
                                    const newEnum = [...enumValues];
                                    newEnum.splice(index, 1);
                                    updateField(field.id, { enum: newEnum });
                                }, className: b('remove-button'), children: "Remove" })] }, `enum_${index}`))), _jsx(Button, { view: "normal", size: "s", onClick: () => {
                            const newEnum = [...(enumValues || [])];
                            newEnum.push({
                                content: `Option ${newEnum.length + 1}`,
                                value: `option${newEnum.length + 1}`,
                            });
                            updateField(field.id, { enum: newEnum });
                        }, className: b('add-button'), children: "+ Add Option" })] })] }));
};
//# sourceMappingURL=SelectFieldRenderer.js.map
