import { MutableRefObject, useEffect, useRef, useState } from 'react';
import Engine from '../engine';

const useEngine = (
  avoidRenderLoop = false,
): [Engine, MutableRefObject<HTMLCanvasElement>] => {
  const canvasRef = useRef<HTMLCanvasElement>();
  const [engine, setEngine] = useState<Engine>(null);
  useEffect(() => {
    let currentEngine: Engine;
    if (canvasRef.current) {
      currentEngine = new Engine(
        canvasRef.current,
        avoidRenderLoop,
      );
      setEngine(currentEngine);
    }
    return (): void => {
      currentEngine.dispose();
    };
  }, []);
  return [engine, canvasRef];
};

export default useEngine;