import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { CollisionPriority } from '@dnd-kit/abstract';
import { SortableKeyboardPlugin, isSortable } from '@dnd-kit/dom/sortable';
import { useSortable } from '@dnd-kit/react/sortable';
import { Copy, Grip, TrashBin } from '@gravity-ui/icons';
import { Button, Icon, Label } from '@gravity-ui/uikit';
import { useFormContext } from "../../hooks/FormContext.js";
import { formBuilderV2Cn } from "../../utils/cn.js";
import { isDropAfter, isPaletteData } from "../../utils/dragData.js";
import { FieldPreview } from "./components/FieldPreview.js";
import { SectionChildrenDropZone } from "./components/SectionChildrenDropZone.js";
import './CanvasCard.css';
const b = formBuilderV2Cn('canvas-card');
export const CanvasCard = ({ field, index, group }) => {
    const { selectedFieldId, selectField, removeField, duplicateField } = 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 } = useSortable({
        id: field.id,
        index,
        group,
        data: cardData,
        transition: null,
        plugins: [SortableKeyboardPlugin],
        collisionPriority: field.type === 'section' ? CollisionPriority.Low : undefined,
        alignment: {
            x: 'start',
            y: 'center',
        },
    });
    const dragOp = sortable.manager?.dragOperation;
    const source = dragOp?.source;
    const isPaletteSource = isPaletteData(source?.data);
    const sourceIndex = source && isSortable(source) ? source.index : undefined;
    const pointerY = dragOp?.position?.current?.y;
    const targetCenterY = sortable.droppable?.shape?.center?.y;
    const dropAfter = isDropTarget &&
        !isDragSource &&
        (isPaletteSource
            ? 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 (_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 && (_jsx("div", { className: b('visibility-badge'), children: _jsx(Label, { theme: "info", size: "s", children: "Visibility by condition" }) })), _jsx(FieldPreview, { field: field }), _jsxs("div", { className: b('controls'), children: [_jsx(Button, { ref: handleRef, view: "flat", size: "xs", className: b('control'), "aria-label": "Drag to reorder", title: "Drag to reorder", onClick: (event) => event.stopPropagation(), children: _jsx(Icon, { data: Grip, size: 12 }) }), _jsx(Button, { view: "flat", size: "xs", onClick: (event) => {
                            event.stopPropagation();
                            duplicateField(field.id);
                        }, title: "Duplicate", children: _jsx(Icon, { data: Copy, size: 12 }) }), _jsx(Button, { view: "flat-danger", size: "xs", onClick: (event) => {
                            event.stopPropagation();
                            removeField(field.id);
                        }, title: "Remove", children: _jsx(Icon, { data: TrashBin, size: 12 }) })] }), field.type === 'section' && (_jsx(SectionChildrenDropZone, { sectionId: field.id, fields: field.fields }))] }));
};
//# sourceMappingURL=CanvasCard.js.map
