import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { TextInput } from '@gravity-ui/uikit';
import { useFormContext } from "../../hooks/FormContext.js";
import { collectNames } from "../../utils/fieldNames.js";
import { WhenEditor } from "../WhenEditor/WhenEditor.js";
import { ColorInputSettings } from "./fields/ColorInputSettings.js";
import { OptionsSettings } from "./fields/OptionsSettings.js";
import { Row } from "./fields/Row.js";
import { SectionSettings } from "./fields/SectionSettings.js";
import { SwitchSettings } from "./fields/SwitchSettings.js";
import { TextFieldSettings } from "./fields/TextFieldSettings.js";
import { TextSettings } from "./fields/TextSettings.js";
import './FieldSettings.css';
export const FieldSettings = ({ field }) => {
    const { updateField, formFields } = useFormContext();
    const availableFields = React.useMemo(() => {
        const all = Array.from(collectNames(formFields));
        if (field.type === 'section' || field.type === 'text')
            return all;
        return all.filter((n) => n !== field.name);
    }, [formFields, field]);
    const whenEditorSection = (_jsx(Row, { label: "Visible when", children: _jsx(WhenEditor, { when: field.when, availableFields: availableFields, onChange: (next) => updateField(field.id, { when: next }) }) }));
    const commonRows = (_jsxs(React.Fragment, { children: [_jsx(Row, { label: "Title", children: _jsx(TextInput, { value: 'title' in field ? (field.title ?? '') : '', onUpdate: (value) => updateField(field.id, { title: value }), placeholder: "Label shown above the field" }) }), _jsx(Row, { label: "Name", children: _jsx(TextInput, { value: 'name' in field ? (field.name ?? '') : '', onUpdate: (value) => updateField(field.id, { name: value }), placeholder: "Path in content object" }) })] }));
    if (field.type === 'section') {
        return (_jsx(SectionSettings, { field: field, updateField: updateField, whenEditorSection: whenEditorSection }));
    }
    if (field.type === 'text') {
        return (_jsx(TextSettings, { field: field, updateField: updateField, whenEditorSection: whenEditorSection }));
    }
    if (field.type === 'textInput' || field.type === 'textArea') {
        return (_jsx(TextFieldSettings, { field: field, updateField: updateField, commonRows: commonRows, whenEditorSection: whenEditorSection }));
    }
    if (field.type === 'switch') {
        return (_jsx(SwitchSettings, { field: field, updateField: updateField, commonRows: commonRows, whenEditorSection: whenEditorSection }));
    }
    if (field.type === 'colorInput') {
        return (_jsx(ColorInputSettings, { field: field, updateField: updateField, commonRows: commonRows, whenEditorSection: whenEditorSection }));
    }
    if (field.type === 'select' || field.type === 'segmentedRadioGroup') {
        return (_jsx(OptionsSettings, { field: field, updateField: updateField, commonRows: commonRows, whenEditorSection: whenEditorSection }));
    }
    return null;
};
//# sourceMappingURL=FieldSettings.js.map
