"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CanvasList = exports.Canvas = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const uikit_1 = require("@gravity-ui/uikit");
const FormContext_1 = require("../../hooks/FormContext.js");
const cn_1 = require("../../utils/cn.js");
const CanvasCard_1 = require("../CanvasCard/CanvasCard.js");
const b = (0, cn_1.formBuilderV2Cn)('canvas');
const CanvasList = ({ fields, parentGroup }) => ((0, jsx_runtime_1.jsx)("div", { className: b('list'), children: fields.map((field, index) => ((0, jsx_runtime_1.jsx)(CanvasCard_1.CanvasCard, { field: field, index: index, group: parentGroup }, field.id))) }));
exports.CanvasList = CanvasList;
const Canvas = () => {
    const { formFields, selectField } = (0, FormContext_1.useFormContext)();
    return ((0, jsx_runtime_1.jsx)(uikit_1.Card, { className: b(), view: "outlined", onClick: () => selectField(null), children: formFields.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: b('empty'), children: (0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", color: "hint", children: "Canvas is empty. Click a field type on the left to add it." }) })) : ((0, jsx_runtime_1.jsx)(CanvasList, { fields: formFields, parentGroup: "root" })) }));
};
exports.Canvas = Canvas;
//# sourceMappingURL=Canvas.js.map
