"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CanvasCard = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const abstract_1 = require("@dnd-kit/abstract");
const sortable_1 = require("@dnd-kit/dom/sortable");
const sortable_2 = require("@dnd-kit/react/sortable");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const FormContext_1 = require("../../hooks/FormContext.js");
const cn_1 = require("../../utils/cn.js");
const dragData_1 = require("../../utils/dragData.js");
const FieldPreview_1 = require("./components/FieldPreview.js");
const SectionChildrenDropZone_1 = require("./components/SectionChildrenDropZone.js");
const b = (0, cn_1.formBuilderV2Cn)('canvas-card');
const CanvasCard = ({ field, index, group }) => {
    const { selectedFieldId, selectField, removeField, duplicateField } = (0, FormContext_1.useFormContext)();
    const isSelected = selectedFieldId === field.id;
    const hasWhen = 'when' in field && Array.isArray(field.when) && field.when.length > 0;
    const cardData = React.useMemo(() => ({ kind: 'card', group }), [group]);
    const { ref, handleRef, isDragSource, isDropTarget, sortable } = (0, sortable_2.useSortable)({
        id: field.id,
        index,
        group,
        data: cardData,
        transition: null,
        plugins: [sortable_1.SortableKeyboardPlugin],
        collisionPriority: field.type === 'section' ? abstract_1.CollisionPriority.Low : undefined,
        alignment: {
            x: 'start',
            y: 'center',
        },
    });
    const dragOp = sortable.manager?.dragOperation;
    const source = dragOp?.source;
    const isPaletteSource = (0, dragData_1.isPaletteData)(source?.data);
    const sourceIndex = source && (0, sortable_1.isSortable)(source) ? source.index : undefined;
    const pointerY = dragOp?.position?.current?.y;
    const targetCenterY = sortable.droppable?.shape?.center?.y;
    const dropAfter = isDropTarget &&
        !isDragSource &&
        (isPaletteSource
            ? (0, dragData_1.isDropAfter)(pointerY, targetCenterY)
            : sourceIndex !== undefined && sourceIndex < index);
    const handleClick = (event) => {
        event.stopPropagation();
        selectField(field.id);
    };
    const handleKeyDown = (event) => {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            event.stopPropagation();
            selectField(field.id);
        }
    };
    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: b({
            selected: isSelected,
            dragging: isDragSource,
            'drop-target': isDropTarget && !isDragSource && !dropAfter,
            'drop-target-after': dropAfter,
        }), onClick: handleClick, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-pressed": isSelected, children: [hasWhen && ((0, jsx_runtime_1.jsx)("div", { className: b('visibility-badge'), children: (0, jsx_runtime_1.jsx)(uikit_1.Label, { theme: "info", size: "s", children: "Visibility by condition" }) })), (0, jsx_runtime_1.jsx)(FieldPreview_1.FieldPreview, { field: field }), (0, jsx_runtime_1.jsxs)("div", { className: b('controls'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { ref: handleRef, view: "flat", size: "xs", className: b('control'), "aria-label": "Drag to reorder", title: "Drag to reorder", onClick: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Grip, size: 12 }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: "xs", onClick: (event) => {
                            event.stopPropagation();
                            duplicateField(field.id);
                        }, title: "Duplicate", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Copy, size: 12 }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-danger", size: "xs", onClick: (event) => {
                            event.stopPropagation();
                            removeField(field.id);
                        }, title: "Remove", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin, size: 12 }) })] }), field.type === 'section' && ((0, jsx_runtime_1.jsx)(SectionChildrenDropZone_1.SectionChildrenDropZone, { sectionId: field.id, fields: field.fields }))] }));
};
exports.CanvasCard = CanvasCard;
//# sourceMappingURL=CanvasCard.js.map
