import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "@xyflow/react";
import type { EdgeProps } from "@xyflow/react";

export function ArchConnectionEdge(props: EdgeProps) {
  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX: props.sourceX,
    sourceY: props.sourceY,
    targetX: props.targetX,
    targetY: props.targetY,
    sourcePosition: props.sourcePosition,
    targetPosition: props.targetPosition,
  });

  const edgeData = props.data as Record<string, unknown> | undefined;
  const isAsync = edgeData?.type === "async";

  return (
    <>
      <BaseEdge
        id={props.id}
        path={edgePath}
        style={{
          stroke: "var(--diagram-architecture)",
          strokeWidth: 1.5,
          strokeDasharray: isAsync ? "6 3" : undefined,
        }}
        markerEnd="url(#arch-arrow)"
      />
      {props.label && (
        <EdgeLabelRenderer>
          <div
            className="arch-edge-label"
            style={{
              transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
            }}
          >
            {props.label}
          </div>
        </EdgeLabelRenderer>
      )}
    </>
  );
}
