import React, { useEffect } from 'react';
import { getBezierPath } from '@xyflow/react';

const CustomConnectionLine = ({ fromNode, fromX, fromY, toX, toY }) => {
  useEffect(() => {
    console.log('fromNode', fromNode);
  }, [fromNode]);
  const [path] = getBezierPath({
    sourceX: fromX,
    sourceY: fromY,
    targetX: toX,
    targetY: toY,
    curvature: 0.2// 调整这个值可以改变曲线的弯曲程度
  });

  return (
    <g>
      <path
        d={path}
        stroke="#b1b1b7"
        strokeWidth={1}
        className="animated-stroke"
        fill="none"
      />
      {/*TODO 临时定义，后续等接口字段。 存在事件信息的时候才展示连接提示*/}
      {fromNode.data.eventData && (
        <text x={(fromX + toX) / 2} y={(fromY + toY) / 2 - 10} fill="#000" fontSize={12}>
          正在连接...
        </text>
      )}
    </g>
  );
};

export default CustomConnectionLine;