import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Card } from '@gravity-ui/uikit';
import { useFormContext } from "../../hooks/FormContext.js";
import { formBuilderCn } from "../../utils/cn.js";
import { ArrayFieldRenderer } from "../ArrayFieldRenderer/ArrayFieldRenderer.js";
import { ConfigRow } from "../ConfigRow/ConfigRow.js";
import { FieldHeader } from "../FieldHeader/FieldHeader.js";
import { ObjectFieldRenderer } from "../ObjectFieldRenderer/ObjectFieldRenderer.js";
import { OptionsRenderer } from "../OptionsRenderer/OptionsRenderer.js";
import { SelectFieldRenderer } from "../SelectFieldRenderer/SelectFieldRenderer.js";
import './FieldCard.css';
const b = formBuilderCn('field-card');
export const FieldCard = ({ field, inputTypeMenuItems }) => {
    const { removeField, updateField, removeObjectProperty, removeOptionProperty, updateObjectProperty, updateOptionProperty, } = useFormContext();
    const renderNestedField = (nestedField, index, parentId, optionIndex) => {
        const isInOption = optionIndex !== undefined;
        const handleRemove = () => {
            if (isInOption) {
                removeOptionProperty(parentId, optionIndex, index);
            }
            else {
                removeObjectProperty(parentId, index);
            }
        };
        const handleUpdate = (updates) => {
            if (isInOption) {
                updateOptionProperty(parentId, optionIndex, index, updates);
            }
            else {
                updateObjectProperty(parentId, index, updates);
            }
        };
        return (_jsxs("div", { className: b('nested-field'), children: [_jsx(FieldHeader, { title: nestedField.type.toUpperCase(), onRemove: handleRemove, variant: "subheader-3", buttonSize: "xs" }), _jsxs("div", { className: b('config'), children: [_jsx(ConfigRow, { label: "Name", value: nestedField.name, onUpdate: (value) => handleUpdate({ name: value }) }), _jsx(ConfigRow, { label: "Title", value: nestedField.title, onUpdate: (value) => handleUpdate({ title: value }) }), renderFieldTypeSpecificContent(nestedField, parentId)] })] }, `${parentId}_${index}`));
    };
    const renderFieldTypeSpecificContent = (fieldConfig, parentId) => {
        switch (fieldConfig.type) {
            case 'object':
                return (_jsx(ObjectFieldRenderer, { field: fieldConfig, fieldName: parentId, inputTypeMenuItems: inputTypeMenuItems, renderNestedField: renderNestedField }));
            case 'oneOf':
                return (_jsx(OptionsRenderer, { field: fieldConfig, fieldName: parentId, inputTypeMenuItems: inputTypeMenuItems, renderNestedField: renderNestedField }));
            case 'anyOf':
                return (_jsx(OptionsRenderer, { field: fieldConfig, fieldName: parentId, inputTypeMenuItems: inputTypeMenuItems, renderNestedField: renderNestedField }));
            case 'select':
                return _jsx(SelectFieldRenderer, { field: fieldConfig });
            case 'array':
                return (_jsx(ArrayFieldRenderer, { field: fieldConfig, fieldName: parentId, inputTypeMenuItems: inputTypeMenuItems, renderNestedField: renderNestedField }));
            default:
                return null;
        }
    };
    return (_jsxs(Card, { className: b(), children: [_jsx(FieldHeader, { title: field.type.toUpperCase(), onRemove: () => removeField(field.id) }), _jsxs("div", { className: b('config'), children: [_jsx(ConfigRow, { label: "Name", value: field.name, onUpdate: (value) => updateField(field.id, { name: value }) }), _jsx(ConfigRow, { label: "Title", value: field.title, onUpdate: (value) => updateField(field.id, { title: value }) }), renderFieldTypeSpecificContent(field, field.id)] })] }, field.id));
};
//# sourceMappingURL=FieldCard.js.map
