import React from 'react';
import { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, useReactFlow } from '@xyflow/react';
import EdgeAddNodeButton from '@/pages/flowEditor/components/edgeAddNodeButton';

type DataDisplayEdgeData = {
  label?: string;
  value?: any;
};

const DataDisplayEdge: React.FC<EdgeProps> = ({
                                                id,
                                                sourceX,
                                                sourceY,
                                                targetX,
                                                targetY,
                                                sourcePosition,
                                                targetPosition,
                                                style = {},
                                                markerEnd,
                                                selected,
                                                data
                                              }) => {
  const [edgePath, labelX, labelY] = getSmoothStepPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
    borderRadius: 8 // 设置圆角半径
  });

  // 从数据中获取悬停状态
  const hovered = data?.hovered || false;

  // 从数据中获取要显示的信息
  const displayData: DataDisplayEdgeData = data?.displayData || {};

  // 使用useReactFlow钩子获取setEdges方法
  const { setEdges } = useReactFlow();

  // 边点击处理函数
  const handleEdgeAddNode = (e) => {
    // 更新边的数据，触发边上添加节点的流程
    setEdges(eds => eds.map(edge => {
      if (edge.id === id) {
        return {
          ...edge,
          data: {
            ...edge.data,
            addNodeTrigger: true,
            clientX: e.clientX,
            clientY: e.clientY
          }
        };
      }
      return edge;
    }));
  };

  const handleDataClick = (e) => {
    console.log('click:', e);
  };

  return (
    <>
      <BaseEdge
        path={edgePath}
        markerEnd={markerEnd}
        style={{
          stroke: selected ? '#1890ff' : '#b1b1b7',
          strokeWidth: selected ? 2 : 1,
          ...style
        }}
      />
      <EdgeLabelRenderer>
        <div
          style={{
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
            fontSize: 12,
            pointerEvents: 'all'
          }}
          className="nodrag nopan"
        >
          {/* 数据展示框 */}
          {displayData && Object.keys(displayData).length > 0 && (
            <div
              onClick={(e) => handleDataClick(e)}
              style={{
                background: '#ffffff',
                border: '1px solid #ddd',
                borderRadius: 4,
                padding: 4,
                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
                minWidth: 100,
                marginBottom: 4,
                fontSize: 12,
                textAlign: 'center'
              }}
            >
              {displayData.label && (
                <div style={{ fontWeight: 'bold', marginBottom: 2 }}>
                  {displayData.label}
                </div>
              )}
              {displayData.value !== undefined && (
                <div>
                  {typeof displayData.value === 'object'
                    ? JSON.stringify(displayData.value)
                    : String(displayData.value)}
                </div>
              )}
            </div>
          )}

          {hovered && (
            <EdgeAddNodeButton
              onClick={(e) => handleEdgeAddNode(e)}
            />
          )}
        </div>
      </EdgeLabelRenderer>
    </>
  );
};

export default DataDisplayEdge;