import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, type EdgeProps } from '@xyflow/react';
import { edgeDisconnectRef } from './strategyEditorCallbacks';

export function StrategyFlowEdge({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  selected,
}: EdgeProps) {
  const [edgePath, labelX, labelY] = getSmoothStepPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
  });

  return (
    <>
      <BaseEdge
        id={id}
        path={edgePath}
        className={`se-flow-edge${selected ? ' se-flow-edge--selected' : ''}`}
        style={{ strokeWidth: selected ? 3 : 2 }}
      />
      {selected && edgeDisconnectRef.current && (
        <EdgeLabelRenderer>
          <button
            type="button"
            className="se-flow-edge-del"
            title="연결 끊기 (전략 코드에서 제외)"
            style={{
              position: 'absolute',
              transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
              pointerEvents: 'all',
            }}
            onClick={(e) => {
              e.stopPropagation();
              edgeDisconnectRef.current?.(id);
            }}
          >
            ×
          </button>
        </EdgeLabelRenderer>
      )}
    </>
  );
}