import { Game, Resource } from "@incgame/engine";
import { GraphNode } from "../ui/graph";

type Props = {
    game: Game,
    from: { node: GraphNode, resource: Resource },
    to: { node: GraphNode, resource: Resource },
}

export const LinkLine = function ({ from, to }: Props) {
    const markerId = `node-line-arrow-${from.node.entity.id}-${to.node.entity.id}`.replace(/[^a-zA-Z0-9_-]/g, '_');

    const fromSocket = from.node.entity.getDisplayInfo().sockets.find((s) => s.type === 'input' && s.resource == from.resource);
    const toSocket = to.node.entity.getDisplayInfo().sockets.find((s) => s.type === 'output' && s.resource == to.resource);

    if (!fromSocket || !toSocket)
        return null;

    return (
        <svg>
            <defs>
                <marker
                    id={markerId}
                    viewBox="0 0 10 10"
                    refX="9"
                    refY="5"
                    markerWidth="6"
                    markerHeight="6"
                    orient="auto-start-reverse"
                >
                    <path d="M0,0 L10,5 L0,10 z" fill="white" />
                </marker>
            </defs>
            <line
                x1={from.node.position.x}
                y1={from.node.position.y}
                x2={to.node.position.x}
                y2={to.node.position.y}
                stroke="white"
                strokeWidth={2}
                markerStart={`url(#${markerId})`}
            />
        </svg>
    );
};