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} />;
}
