import {
  Viewer,
} from '@stereograph/teiaviewer';
import { useEffect, useRef } from 'react';

const viewer = new Viewer({
  debug: true,
  dev: {
    verbose: true,
  },
});

/**
 * App component setting up a viewer and a viewport
 * @returns
 */
export const App = () => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

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

    viewer.attachViewport(canvasRef.current);

    return () => {
      viewer.detachViewport();
    };
  }, []);

  return (
    <div style={{
      width: '100vw',
      height: '100vh',
    }}
    >
      <canvas
        ref={canvasRef}
        style={{
          width: '100vw',
          height: '100vh',
        }}
      />
    </div>
  );
};