import { Graphics } from "pixi.js";
import { useCallback } from "react";
import { PATH_COLOR, PATH_WIDTH } from "./Constants";
import { coordinatesToLocal } from "./utils";


interface TravelPathProps {
	points: {x: number, y: number}[];
}

export function TravelPath({
	points
}: Readonly<TravelPathProps>) {

	const draw = useCallback((g: Graphics) => {
		g.clear();
		const coordStart = coordinatesToLocal(points[0].x, points[0].y);
		g.moveTo(coordStart.x, coordStart.y);
		for (let i = 1; i < points.length - 1; i++) {
			const coordinates = coordinatesToLocal(points[i].x, points[i].y);
			g.lineTo(coordinates.x, coordinates.y);
		}
		g.stroke({
			color: PATH_COLOR,
			width: PATH_WIDTH
		});
	}, [points]);

	if(points.length === 0) {
		console.error("points is empty");
		return null;
	}

	return (
		<pixiGraphics
		draw={draw}
		/>
	);
}