"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SectionChildrenDropZone = exports.SECTION_DROP_PREFIX = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@dnd-kit/react");
const uikit_1 = require("@gravity-ui/uikit");
const cn_1 = require("../../../utils/cn.js");
const Canvas_1 = require("../../Canvas/Canvas.js");
const b = (0, cn_1.formBuilderV2Cn)('canvas-card');
exports.SECTION_DROP_PREFIX = 'section-drop:';
const SectionChildrenDropZone = ({ sectionId, fields }) => {
    const { ref, isDropTarget } = (0, react_1.useDroppable)({
        id: `${exports.SECTION_DROP_PREFIX}${sectionId}`,
        data: { kind: 'section-drop', sectionId },
    });
    const className = b('children');
    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: `${className}${isDropTarget ? ` ${className}_drop-target` : ''}`, children: [(0, jsx_runtime_1.jsx)(Canvas_1.CanvasList, { fields: fields, parentGroup: `section:${sectionId}` }), fields.length === 0 && ((0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", color: "hint", children: "Empty section. Drag a tile from the palette into this box, or select the section first and click a tile to add it inside." }))] }));
};
exports.SectionChildrenDropZone = SectionChildrenDropZone;
//# sourceMappingURL=SectionChildrenDropZone.js.map
