import { Polyline } from "@noya-app/noya-graphics";
import React from "react";
import { BaseCanvasData } from "../plugins/baseCanvas";
import { useReactCanvas } from "../plugins/ReactCanvas";
import { SnapLine } from "../utils/snapUtils";

type SnapLinesProps = {
  lines: SnapLine[];
  color?: string;
  data?: Pick<BaseCanvasData, "zoom">;
};

export const SnapLines: React.FC<SnapLinesProps> = ({
  lines,
  color = "#FFA500",
  data,
}) => {
  const ReactCanvas = useReactCanvas();
  const canvasData = ReactCanvas.useData();

  data = data ?? canvasData;

  const zoom = data.zoom;
  const strokeWidth = 2 / zoom;

  return (
    <>
      {lines.map((line, index) => (
        <Polyline
          key={index}
          points={[
            { x: line.x1, y: line.y1 },
            { x: line.x2, y: line.y2 },
          ]}
          paint={{
            style: "stroke",
            strokeWidth,
            color,
          }}
        />
      ))}
    </>
  );
};