import { Toolbar } from '@mui/material';
import { CameraGizmo, TeiaViewer, TeiaViewport } from '@stereograph/teiaviewer';
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>
      <TeiaViewport viewer={viewer}>
        <Toolbar
          sx={{
            position: 'absolute',
            bottom: '0.75rem',
            left: '50%',
            transform: 'translateX(-50%)'
          }}
        />
        <CameraGizmo sx={{ left: 2, bottom: 3 }} />
      </TeiaViewport>
    </div>
  );
};

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) {
    const viewer = new TeiaViewer({
      twinApi: {
        baseUrl: 'teia-twin-base-url',
        token: 'teia-twin-token'
      }
    });
    viewerRef.current = viewer;
  }

  return viewerRef.current;
};