import { BaseEdge, Edge, EdgeLabelRenderer, EdgeProps, getBezierPath, getSmoothStepPath, getStraightPath, useReactFlow } from '@xyflow/react';

export type GraphEdge = Edge<{ text: string }, 'graph-edge'>;

export const GraphEdge = ({ id, sourceX, sourceY, targetX, targetY, data, ...props }: EdgeProps<GraphEdge>) => {
    const { setEdges } = useReactFlow();
    // 使用贝塞尔曲线代替直线，让连线更流畅
    const [edgePath, labelX, labelY] = getBezierPath({
        sourceX,
        sourceY,
        targetX,
        targetY,
    });

    return (
        <>
            <BaseEdge
                path={edgePath}
                style={{
                    strokeWidth: 2,
                    stroke: '#b1b1b7',
                    transition: 'stroke 0.3s, stroke-width 0.3s',
                }}
                className="hover:stroke-blue-500 hover:stroke-[3px]"
            />
            {/* 添加边的标签渲染器 */}
            <EdgeLabelRenderer>
                {data?.text && (
                    <div
                        style={{
                            position: 'absolute',
                            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
                            fontSize: 12,
                            pointerEvents: 'all',
                        }}
                        className="nodrag nopan px-2 py-1 rounded bg-white/80 shadow-sm"
                    >
                        {data.text}
                    </div>
                )}
            </EdgeLabelRenderer>
        </>
    );
};