import { Viewer } from '@stereograph/teiaviewer';
import { LoadTwinCommand, TeiaPlugin } from '@stereograph/teiaviewer-base-plugins';
import React from 'react';

/**
 * Simple example to load a twin in the viewer on button click.
 */
export const LoadTwinButton = () => {
  const viewer = useViewer();

  const onLoadTwinButtonClick = () => {
    const projectId = 42;
    const command = new LoadTwinCommand(viewer, projectId);
    command.execute();
  };

  return <button onClick={onLoadTwinButtonClick}>LoadTwin</button>;
};

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

  return viewerRef.current;
};