import { insetRect, Rect } from "@noya-app/noya-geometry";
import { Rectangle } from "@noya-app/noya-graphics";
import React, { useMemo } from "react";
import { BaseCanvasData, getCanvasTransform } from "../plugins/baseCanvas";
import { useReactCanvas } from "../plugins/ReactCanvas";

export function SelectionRect({
  selectionRect,
  borderRadius = 0,
  data,
}: {
  selectionRect?: Rect;
  borderRadius?: number;
  data?: Pick<BaseCanvasData, "zoom" | "origin">;
}) {
  const ReactCanvas = useReactCanvas();
  const canvasData = ReactCanvas.useData();

  data = data ?? canvasData;

  const transform = useMemo(() => getCanvasTransform(data), [data]);

  if (!selectionRect) return null;

  return (
    <Rectangle
      cornerRadius={borderRadius}
      rect={transform.applyTo(insetRect(selectionRect, 0.5))}
      paint={{
        style: "stroke",
        color: "#1E90FF",
      }}
    />
  );
}