import { jsx, jsxs } from "react/jsx-runtime";
import { getBezierPath } from "../../xyflow/react.js";
function getArrowFromBezier(path, arrowSize) {
    const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    pathEl.setAttribute('d', path);
    const totalLength = pathEl.getTotalLength();
    const endPoint = pathEl.getPointAtLength(totalLength);
    const prevPoint = pathEl.getPointAtLength(totalLength - arrowSize);
    const angle = Math.atan2(endPoint.y - prevPoint.y, endPoint.x - prevPoint.x);
    return {
        endX: endPoint.x,
        endY: endPoint.y,
        angle
    };
}
function StageConnectionEdge({ fromX, fromY, toX, toY, fromPosition, toPosition, fromNode, toNode }) {
    if (void 0 === fromX || void 0 === fromY || void 0 === toX || void 0 === toY) return null;
    const sourceX = fromNode ? fromNode.position.x + (fromNode.measured?.width ?? 0) : fromX;
    const sourceY = fromNode?.position.y ? fromNode.position.y + 32 : fromY;
    const targetX = toNode ? toNode.position.x : toX;
    const targetY = toNode ? toNode.position.y + 32 : toY;
    const [pathData] = getBezierPath({
        sourceX,
        sourceY,
        sourcePosition: fromPosition,
        targetX,
        targetY,
        targetPosition: toPosition
    });
    const stroke = 'var(--canvas-selection-indicator)';
    const strokeWidth = 2.5;
    const arrowSize = 10;
    const { endX, endY, angle } = getArrowFromBezier(pathData, arrowSize);
    const arrowLineLength = arrowSize;
    return /*#__PURE__*/ jsxs("g", {
        className: "animated",
        children: [
            /*#__PURE__*/ jsx("path", {
                d: pathData,
                stroke: stroke,
                strokeWidth: strokeWidth,
                strokeLinecap: "round",
                strokeLinejoin: "round",
                fill: "none",
                strokeDasharray: "5,5",
                style: {
                    animation: 'dashdraw 0.5s linear infinite'
                }
            }),
            /*#__PURE__*/ jsx("style", {
                children: `
          @keyframes dashdraw {
            0% {
              stroke-dashoffset: 10;
            }
            100% {
              stroke-dashoffset: 0;
            }
          }
        `
            }),
            /*#__PURE__*/ jsx("line", {
                x1: endX,
                y1: endY,
                x2: endX - arrowLineLength * Math.cos(angle - Math.PI / 6),
                y2: endY - arrowLineLength * Math.sin(angle - Math.PI / 6),
                stroke: stroke,
                strokeWidth: strokeWidth
            }),
            /*#__PURE__*/ jsx("line", {
                x1: endX,
                y1: endY,
                x2: endX - arrowLineLength * Math.cos(angle + Math.PI / 6),
                y2: endY - arrowLineLength * Math.sin(angle + Math.PI / 6),
                stroke: stroke,
                strokeWidth: strokeWidth
            })
        ]
    });
}
export { StageConnectionEdge };
