"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Inspector = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const uikit_1 = require("@gravity-ui/uikit");
const FieldSettings_1 = require("../FieldSettings/FieldSettings.js");
const FormContext_1 = require("../../hooks/FormContext.js");
const cn_1 = require("../../utils/cn.js");
const fieldMeta_1 = require("../../utils/fieldMeta.js");
const fieldTree_1 = require("../../utils/fieldTree.js");
const b = (0, cn_1.formBuilderV2Cn)('inspector');
const Inspector = () => {
    const { formFields, selectedFieldId } = (0, FormContext_1.useFormContext)();
    const selected = React.useMemo(() => (selectedFieldId ? (0, fieldTree_1.findFieldById)(formFields, selectedFieldId) : null), [formFields, selectedFieldId]);
    return ((0, jsx_runtime_1.jsx)(uikit_1.Card, { className: b(), view: "outlined", children: selected ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "subheader-2", children: fieldMeta_1.TYPE_LABELS[selected.type] }), 'name' in selected && selected.name ? ((0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "caption-1", color: "hint", children: selected.name })) : null] }), (0, jsx_runtime_1.jsx)("div", { className: b('body'), children: (0, jsx_runtime_1.jsx)(FieldSettings_1.FieldSettings, { field: selected }) })] })) : ((0, jsx_runtime_1.jsx)("div", { className: b('empty'), children: (0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", color: "hint", children: "Select a field on the canvas to edit its settings." }) })) }));
};
exports.Inspector = Inspector;
//# sourceMappingURL=Inspector.js.map
