import { Toolbar } from '@mui/material';
import { CameraGizmo, Viewer, Viewport } from '@stereograph/teiaviewer';
import { TeiaPlugin } from '@stereograph/teiaviewer-base-plugins';
import React from 'react';

/**
 * Basic example Viewer App Component
 * If you want the toaster to be displayed you need to add it
 * @returns
 */
export const App = () => {
  const viewer = useViewer();

  return (
    <div>
      <Viewport viewer={viewer}>
        <Toolbar
          sx={{
            position: 'absolute',
            bottom: '0.75rem',
            left: '50%',
            transform: 'translateX(-50%)',
          }}
        />
        <CameraGizmo sx={{
          left: 2,
          bottom: 3,
        }}
        />
      </Viewport>
    </div>
  );
};

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, {
      api: {
        twinApiUrl: 'teia-twin-base-url',
        token: 'teia-twin-token',
      },
    }));
    viewerRef.current = viewer;
  }

  return viewerRef.current;
};