import { createRect, insetRect } from "@noya-app/noya-geometry";

import { Rectangle } from "@noya-app/noya-graphics";
import React, { useMemo } from "react";
import { BaseCanvasData, getCanvasTransform } from "../plugins/baseCanvas";
import { isMarqueeMode } from "../plugins/marqueePlugin";
import { BaseMode } from "../plugins/PluginSystem";
import { useReactCanvas } from "../plugins/ReactCanvas";

export function Marquee({
  data,
  mode,
}: {
  data?: Pick<BaseCanvasData, "zoom" | "origin">;
  mode?: BaseMode;
}) {
  const ReactCanvas = useReactCanvas();
  const canvasData = ReactCanvas.useData();
  const canvasMode = ReactCanvas.useMode();

  data = data ?? canvasData;
  mode = mode ?? canvasMode;

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

  if (!isMarqueeMode(mode)) return null;

  return (
    <Rectangle
      rect={transform.applyTo(insetRect(createRect(mode.region), 0.5))}
      paint={{
        style: "stroke",
        color: "#FFA500",
        strokeWidth: 1,
      }}
    />
  );
}