import { jsx } from "react/jsx-runtime";
import { DragOverlay } from "@dnd-kit/core";
import { useStore } from "../../xyflow/react.js";
import { useMemo } from "react";
import { createPortal } from "react-dom";
import { StageTask } from "./StageNode.styles.js";
import { TaskContent } from "./TaskContent.js";
const StageTaskDragOverlay = ({ activeTask, isActiveTaskParallel, taskWidthStyle })=>{
    const zoom = useStore((state)=>state.transform[2]);
    const dragOverlayStyle = useMemo(()=>({
            transform: `scale(${zoom})`,
            transformOrigin: 'top left'
        }), [
        zoom
    ]);
    if (!activeTask) return null;
    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(DragOverlay, {
        children: /*#__PURE__*/ jsx("div", {
            style: dragOverlayStyle,
            children: /*#__PURE__*/ jsx(StageTask, {
                selected: true,
                isParallel: isActiveTaskParallel,
                style: {
                    cursor: 'grabbing',
                    ...taskWidthStyle
                },
                children: /*#__PURE__*/ jsx(TaskContent, {
                    task: activeTask,
                    isDragging: true
                })
            })
        })
    }), document.body);
};
export { StageTaskDragOverlay };
