import { useEffect, type RefObject } from "react";
import type { AppStore } from "@editor/store";
import { createRenderer } from "@renderer/index";

export function useCanvasRenderer(canvasRef: RefObject<HTMLCanvasElement | null>, store: AppStore) {
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const renderer = createRenderer(canvas);
    renderer.render(store.getState());

    const unsubscribe = store.subscribe((state) => {
      renderer.render(state);
    });

    return () => {
      unsubscribe();
      renderer.dispose();
    };
  }, [canvasRef, store]);
}