import { jsx, jsxs } from "react/jsx-runtime";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { useStore } from "../../xyflow/react.js";
import { memo, useCallback, useMemo, useRef } from "react";
import { INDENTATION_WIDTH, StageTask, StageTaskDragPlaceholder, StageTaskDragPlaceholderWrapper, StageTaskWrapper } from "./StageNode.styles.js";
import { TaskContent } from "./TaskContent.js";
import { TaskMenu } from "./TaskMenu.js";
const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, getContextMenuItems, onTaskClick, isDragDisabled, projectedDepth, isTaskLoading })=>{
    const taskRef = useRef(null);
    const menuRef = useRef(null);
    const handleClick = useCallback((e)=>{
        onTaskClick(e, task.id);
    }, [
        onTaskClick,
        task.id
    ]);
    const handleContextMenu = useCallback((e)=>{
        menuRef.current?.handleContextMenu(e);
    }, []);
    const { attributes, listeners, setNodeRef, transition, transform, isDragging } = useSortable({
        id: task.id,
        disabled: isDragDisabled
    });
    const zoom = useStore((s)=>transform ? s.transform[2] : 1);
    const style = useMemo(()=>{
        const scaledTransform = transform ? {
            ...transform,
            x: transform.x / zoom,
            y: transform.y / zoom
        } : null;
        let marginLeft;
        if (isDragging && void 0 !== projectedDepth) if (1 !== projectedDepth || isParallel) {
            if (0 === projectedDepth && isParallel) marginLeft = `-${INDENTATION_WIDTH}px`;
        } else marginLeft = `${INDENTATION_WIDTH}px`;
        return {
            transition,
            transform: CSS.Transform.toString(scaledTransform),
            marginLeft
        };
    }, [
        transform,
        zoom,
        transition,
        isDragging,
        projectedDepth,
        isParallel
    ]);
    if (isDragging) {
        const isTargetParallel = 1 === projectedDepth;
        return /*#__PURE__*/ jsx(StageTaskDragPlaceholderWrapper, {
            ref: setNodeRef,
            style: style,
            children: /*#__PURE__*/ jsx(StageTaskDragPlaceholder, {
                isTargetParallel: isTargetParallel
            })
        });
    }
    const taskElement = /*#__PURE__*/ jsxs(StageTask, {
        ref: taskRef,
        "data-testid": `stage-task-${task.id}`,
        selected: isSelected,
        status: taskExecution?.status,
        isParallel: isParallel,
        isDragEnabled: !isDragDisabled,
        isPlaceholder: task.isPlaceholder,
        onClick: handleClick,
        ...getContextMenuItems && !isTaskLoading && {
            onContextMenu: handleContextMenu
        },
        children: [
            /*#__PURE__*/ jsx(TaskContent, {
                task: task,
                taskExecution: taskExecution
            }),
            getContextMenuItems && /*#__PURE__*/ jsx(TaskMenu, {
                ref: menuRef,
                task: task,
                getContextMenuItems: getContextMenuItems,
                disabled: isTaskLoading
            })
        ]
    });
    if (isDragDisabled) return taskElement;
    return /*#__PURE__*/ jsx(StageTaskWrapper, {
        ref: setNodeRef,
        style: style,
        isParallel: isParallel,
        ...attributes,
        ...listeners,
        children: taskElement
    });
};
const DraggableTask = /*#__PURE__*/ memo(DraggableTaskComponent);
export { DraggableTask };
