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

const teiaTwinProjectId = 42;

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

  const onLoadTwinButtonClick = () => {
    const command = new LoadTwinCommand(viewer, teiaTwinProjectId);
    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<TeiaViewer | null>(null);
  if (!viewerRef.current) {
    viewerRef.current = new TeiaViewer();
  }

  return viewerRef.current;
};