import { SceneLoadingProgressInfo, TeiaViewer } from '@stereograph/teiaviewer';
import React from 'react';

/**
 * Listening to the viewer events in a React Component
 */
export const LoadingInfoComponent = () => {
  const viewer = useViewer();

  // The viewer emits signals you are able to connect to when a react component mounts.
  // Don't forget to disconnect on component dismount.
  React.useEffect(() => {
    viewer.signals.onLoadingProgress.connect(onLoadingProgress);
    viewer.signals.onLoadingFinished.connect(onLoadingFinished);

    return () => {
      viewer.signals.onLoadingProgress.disconnect(onLoadingProgress);
      viewer.signals.onLoadingFinished.disconnect(onLoadingFinished);
    };
  }, []);

  const onLoadingProgress = (info: SceneLoadingProgressInfo) => {
    console.log(`Loading ${info.progress * 100} %.`);
  };

  const onLoadingFinished = (info: SceneLoadingProgressInfo) => {
    console.log(`Loaded scene in ${info.elapsedTime} seconds.`);
  };

  return <></>;
};

const useViewer = () => {
  /** Store the viewer object in a React Ref to avoid creating a new one on component render */
  const viewerRef = React.useRef<TeiaViewer | null>(null);
  if (!viewerRef.current) {
    viewerRef.current = new TeiaViewer();
  }

  return viewerRef.current;
};