import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Card, Text } from '@gravity-ui/uikit';
import { FieldSettings } from "../FieldSettings/FieldSettings.js";
import { useFormContext } from "../../hooks/FormContext.js";
import { formBuilderV2Cn } from "../../utils/cn.js";
import { TYPE_LABELS } from "../../utils/fieldMeta.js";
import { findFieldById } from "../../utils/fieldTree.js";
import './Inspector.css';
const b = formBuilderV2Cn('inspector');
export const Inspector = () => {
    const { formFields, selectedFieldId } = useFormContext();
    const selected = React.useMemo(() => (selectedFieldId ? findFieldById(formFields, selectedFieldId) : null), [formFields, selectedFieldId]);
    return (_jsx(Card, { className: b(), view: "outlined", children: selected ? (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('header'), children: [_jsx(Text, { variant: "subheader-2", children: TYPE_LABELS[selected.type] }), 'name' in selected && selected.name ? (_jsx(Text, { variant: "caption-1", color: "hint", children: selected.name })) : null] }), _jsx("div", { className: b('body'), children: _jsx(FieldSettings, { field: selected }) })] })) : (_jsx("div", { className: b('empty'), children: _jsx(Text, { variant: "body-2", color: "hint", children: "Select a field on the canvas to edit its settings." }) })) }));
};
//# sourceMappingURL=Inspector.js.map
