import { useEffect, type RefObject } from "react";
import type { Dispatch } from "@commands/dispatcher";
import { commandIds } from "@commands/ids";

export function useCanvasResize(canvasRef: RefObject<HTMLCanvasElement | null>, dispatch: Dispatch) {
  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);
      dispatch(commandIds.viewportSetSize, { w: width, h: height });
    });

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