import { useEffect, useRef } from "react";
import type { AppStore } from "@editor/store";

export type CanvasViewportProps = {
  store: AppStore;
};

export function CanvasViewport({ store }: CanvasViewportProps) {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const resizeObserver = new ResizeObserver(([entry]) => {
      if (!entry) return;

      const width = Math.floor(entry.contentRect.width);
      const height = Math.floor(entry.contentRect.height);
      store.dispatch("viewport.setSize", { w: width, h: height });
    });

    resizeObserver.observe(canvas);
    return () => resizeObserver.disconnect();
  }, [store]);

  return <canvas ref={canvasRef} className="h-full w-full" />;
}