import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Card, Text } from '@gravity-ui/uikit';
import FormGenerator from "../../../form-generator-v2/FormGenerator.js";
import { useCanvasContent } from "../../CanvasContentContext.js";
import { useFormContext } from "../../hooks/FormContext.js";
import { formBuilderV2Cn } from "../../utils/cn.js";
import { stripIds } from "../../utils/stripIds.js";
import './ContentTab.css';
const b = formBuilderV2Cn('content-tab');
export const ContentTab = () => {
    const { formFields } = useFormContext();
    const { content, setContent } = useCanvasContent();
    const schema = React.useMemo(() => stripIds(formFields), [formFields]);
    return (_jsxs("div", { className: b(), children: [_jsxs(Card, { className: b('column'), view: "outlined", children: [_jsx(Text, { variant: "subheader-2", className: b('title'), children: "Live form" }), schema.length > 0 ? (_jsx(FormGenerator, { blockConfig: schema, contentConfig: content, onUpdate: setContent })) : (_jsx(Text, { variant: "body-2", color: "hint", children: "Add fields on the Visual tab to see the form here." }))] }), _jsxs(Card, { className: b('column'), view: "outlined", children: [_jsx(Text, { variant: "subheader-2", className: b('title'), children: "Content JSON" }), _jsx("pre", { className: b('json'), children: JSON.stringify(content, null, 2) })] })] }));
};
//# sourceMappingURL=ContentTab.js.map
