import { CalendarIcon } from '@heroicons/react/24/outline';
import { Typography } from '@mui/material';
import { Viewer } from '@stereograph/teiaviewer';
import { InfoboxWidgetTab } from '@stereograph/teiaviewer-viewport-react';
import { FunctionComponent } from 'react';

const viewer = new Viewer();
const vPlugin = viewer.getPlugin('Viewport');

const Title: FunctionComponent = () => {
  return (
    <Typography>
      My Custom Infobox tab title
    </Typography>
  );
};

const Content: FunctionComponent = () => {
  return <>My Custom Content</>;
};

const CustomInfoboxTab: InfoboxWidgetTab = {
  id: 'custom-infobox-tab',
  icon: CalendarIcon,
  Title,
  Content,
  tooltip: 'CustomInfoboxTab',
  hidden: async (_viewer, uuid) => {
    // Hide the tabs if infobox is not selecting an object
    return uuid !== null;
  },
};

vPlugin.widgetController.content.infoboxTabs.add(CustomInfoboxTab);

vPlugin.widgetController.content.infoboxTabs.delete(CustomInfoboxTab);