import { jsx as _jsx } from "react/jsx-runtime";
import { Card, Text } from '@gravity-ui/uikit';
import { useFormContext } from "../../hooks/FormContext.js";
import { formBuilderV2Cn } from "../../utils/cn.js";
import { CanvasCard } from "../CanvasCard/CanvasCard.js";
import './Canvas.css';
const b = formBuilderV2Cn('canvas');
const CanvasList = ({ fields, parentGroup }) => (_jsx("div", { className: b('list'), children: fields.map((field, index) => (_jsx(CanvasCard, { field: field, index: index, group: parentGroup }, field.id))) }));
export const Canvas = () => {
    const { formFields, selectField } = useFormContext();
    return (_jsx(Card, { className: b(), view: "outlined", onClick: () => selectField(null), children: formFields.length === 0 ? (_jsx("div", { className: b('empty'), children: _jsx(Text, { variant: "body-2", color: "hint", children: "Canvas is empty. Click a field type on the left to add it." }) })) : (_jsx(CanvasList, { fields: formFields, parentGroup: "root" })) }));
};
export { CanvasList };
//# sourceMappingURL=Canvas.js.map
