import React from 'react';
import { BaseEdge, EdgeTypes } from 'reactflow';
import { getFlowEdgePath, FLOW_EDGE_DEFAULT_FIXED_LENGTH } from '../utils/flowEdgeUtils';

/**
 * 与流程设计器一致的边组件：固定线段长度 + smoothstep/straight，供作业详情、作业编辑等复用
 */
function FlowEdge({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
  data,
  type: propType,
  markerStart,
  style,
  selected,
}: any) {
  const edgeType = (data?.edgeType as string) || propType || 'straight';
  const fixedLength = (data?.fixedLength as number) ?? FLOW_EDGE_DEFAULT_FIXED_LENGTH;

  const [edgePath] = getFlowEdgePath(sourceX, sourceY, targetX, targetY, {
    fixedLength,
    type: edgeType,
  });

  return (
    <BaseEdge
      id={id}
      path={edgePath}
      markerStart={markerStart}
      style={{
        ...style,
        strokeWidth: selected ? 3 : 2,
        stroke: selected ? '#3b82f6' : (style?.stroke ?? '#000000'),
      }}
    />
  );
}

export const sharedFlowEdgeTypes: EdgeTypes = {
  straight: FlowEdge,
  default: FlowEdge,
  smoothstep: FlowEdge,
};

export default FlowEdge;
