import React, { useRef, useState, useLayoutEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { useDraggable } from '@wix/wix-style-react-incubator/dnd-kit/core';
import { action } from 'mobx';
function _KanbanDraggableCardItem(props) {
    const { children: CardComponent, id, cardProps, state } = props;
    const dragHandleRef = useRef(null);
    const cardRef = useRef(null);
    const [cardHeight, setCardHeight] = useState(undefined);
    // Measure card height after render
    useLayoutEffect(() => {
        if (cardRef.current) {
            const height = cardRef.current.offsetHeight;
            setCardHeight(height);
        }
    }, [cardProps]);
    // Use useDraggable instead of useSortable since we only support cross-stage movement
    const { attributes, listeners, setNodeRef, transform, isDragging, setActivatorNodeRef, } = useDraggable({
        id,
    });
    const ariaDescribedBy = `draggable-kanban-card-description-${id}`;
    const stateDragAndDrop = state.dragAndDropState;
    const dragHandleProps = {
        ...attributes,
        ...listeners,
        ref: (e) => {
            setActivatorNodeRef(e);
            dragHandleRef.current = e;
        },
        'aria-describedby': ariaDescribedBy,
        onClick: (e) => e.stopPropagation(),
        ...(process.env.NODE_ENV === 'test' && {
            onPointerDown: action(() => {
                stateDragAndDrop.handleDragStart({ active: { id } });
            }),
        }),
        style: { pointerEvents: 'auto' },
    };
    const dragStyle = {
        // Apply transform for drag feedback
        transform: transform
            ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
            : undefined,
        // Hide the original card when dragging, letting the drag system handle the visual feedback
        visibility: isDragging ? 'hidden' : 'visible',
        // Allow pointer events to pass through to parent droppable when not dragging
        pointerEvents: isDragging ? 'auto' : 'none',
        // Ensure dragged card appears above all other elements including stages
        zIndex: isDragging ? 1000 : 'auto',
        position: 'relative',
    };
    const containerStyle = {
        position: 'relative',
    };
    return (React.createElement("div", { style: containerStyle, "data-hook": "kanban-card-item-events" },
        isDragging && (React.createElement("div", { style: {
                position: 'absolute',
                top: 0,
                left: 0,
                height: cardHeight ? `${cardHeight}px` : '129px',
                width: '246px',
                backgroundColor: '#D6E6FE',
                borderRadius: '8px',
                pointerEvents: 'none',
                zIndex: 1,
                marginLeft: '12px',
            } })),
        React.createElement("div", { ref: (node) => {
                setNodeRef(node);
                cardRef.current = node;
            }, style: dragStyle },
            React.createElement("div", { ...dragHandleProps, "data-hook": `kanban-card-drag-item-${id}` },
                React.createElement(CardComponent, { ...cardProps })))));
}
export const KanbanDraggableCardItem = observer(_KanbanDraggableCardItem);
//# sourceMappingURL=KanbanDraggableCardItem.js.map