import { ContextMenuBuilder, Viewer } from '@stereograph/teiaviewer';

/**
 * To build a custom context menu, you need to provide the viewer a builder function
 * that is called when the context menu is going to be displayed.
 *
 *
 * @param ctx The current viewer context
 * @returns A list of ContextMenuItem
 */
export const CustomContextMenuBuilder: ContextMenuBuilder = (ctx) => {
  const { hitObject } = ctx;

  return [

    // A group is a collection of items grouped under a header
    {
      type: 'group',
      text: 'My custom group',
      items: [
        {
          type: 'action',
          text: 'My custom action on object',
          // Item will be visible only if an object is hit
          hidden: !hitObject,
          action: () => {
            // Perform any action here
          },
        },
      ],
    },

    // A sub menu will open a new pop containing children items
    {
      type: 'submenu',
      text: 'My custom submenu',
      items: [],
    },

  ];
};

const viewer = new Viewer();

// Add a builder (e.g. on plugin registered)
viewer.viewport?.contextMenuController.builders.add(CustomContextMenuBuilder);

// Remove a builder (e.g. on plugin unregistered)
viewer.viewport?.contextMenuController.builders.delete(CustomContextMenuBuilder);