import { EdgeProps, getBezierPath, useInternalNode } from '@xyflow/react';
import { getEdgeParams } from '../utils';

/**
 * FloatingEdge 组件用于渲染图中的浮动边。
 * 该组件通过计算源节点和目标节点的位置，生成贝塞尔曲线路径，并渲染为SVG路径元素。
 * 适用于需要自定义边样式的图结构可视化场景。
 */
function FloatingEdge({ id, source, target, markerEnd, style }: EdgeProps) {
    // 使用 useInternalNode 钩子获取源节点和目标节点的内部节点信息
    const sourceNode = useInternalNode(source);
    const targetNode = useInternalNode(target);

    // 如果源节点或目标节点不存在，则不渲染任何内容
    if (!sourceNode || !targetNode) {
        return null;
    }

    // 获取边的参数，包括源节点和目标节点的坐标及位置信息
    const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
        sourceNode,
        targetNode,
    );

    // 使用 getBezierPath 函数生成贝塞尔曲线路径
    const [edgePath] = getBezierPath({
        sourceX: sx,
        sourceY: sy,
        sourcePosition: sourcePos,
        targetPosition: targetPos,
        targetX: tx,
        targetY: ty,
    });

    // 返回 SVG 路径元素，表示图中的边
    return (
        <path
            id={id}
            className="react-flow__edge-path"
            d={edgePath}
            markerEnd={markerEnd}
            style={style}
        />
    );
}

export default FloatingEdge;