import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Label, Text } from '@gravity-ui/uikit';
import { cloneDeep, set, unset } from 'lodash';
import { componentMap } from "../../../../form-generator-v2/components/constants.js";
import { useCanvasContent } from "../../../CanvasContentContext.js";
import { formBuilderV2Cn } from "../../../utils/cn.js";
const b = formBuilderV2Cn('canvas-card');
const isTemplateField = (field) => 'name' in field && typeof field.name === 'string' && field.name.includes('{{index}}');
const makeOnUpdate = (setContent) => (key, value, options) => {
    setContent((prev) => {
        const next = cloneDeep(prev);
        if (options?.unset) {
            unset(next, key);
        }
        else {
            set(next, key, value);
        }
        return next;
    });
};
export const FieldPreview = ({ field }) => {
    const { content, setContent, templateContent, setTemplateContent } = useCanvasContent();
    const onUpdateForContent = React.useMemo(() => makeOnUpdate(setContent), [setContent]);
    const onUpdateForTemplate = React.useMemo(() => makeOnUpdate(setTemplateContent), [setTemplateContent]);
    if (field.type === 'section') {
        return (_jsxs("div", { className: b('section-header'), children: [_jsx(Text, { variant: "subheader-2", children: field.title || 'Section' }), field.index ? (_jsxs(Label, { theme: "info", size: "s", children: ["Array \u00B7 ", field.itemTitle ?? 'Item {{index}}'] })) : (_jsx(Label, { theme: "unknown", size: "s", children: "Group" }))] }));
    }
    const Component = componentMap[field.type];
    if (!Component) {
        return null;
    }
    const { when: _when, id: _id, ...fieldProps } = field;
    const useTemplate = isTemplateField(field);
    const widgetContent = useTemplate ? templateContent : content;
    const onUpdate = useTemplate ? onUpdateForTemplate : onUpdateForContent;
    return (_jsx(Component, { ...fieldProps, content: widgetContent, onUpdate: onUpdate }));
};
//# sourceMappingURL=FieldPreview.js.map
