import { DeveloperTool, DeveloperToolType, Viewer } from '@stereograph/teiaviewer';
import { FolderApi, Pane } from 'tweakpane';

const viewer = new Viewer();

export class CustomDevTool extends DeveloperTool {
  override name = 'CustomDevTool';
  override type: DeveloperToolType = 'dev';
  private _folder?: FolderApi;
  private _viewer?: Viewer;

  override setup(viewer: Viewer, pane: Pane): void {
    // Here setup the given pane with one folder containing one button
    this._viewer = viewer;
    this._folder = pane.addFolder({
      title: 'CustomFolder',
    });

    this._folder.addButton({
      title: 'CustomButton',
    }).on('click', this._onButtonClick);
  }

  private readonly _onButtonClick = () => {
    // Performs any action of the viewer, e.g. clear scene
    this._viewer?.clear();
  };

  override dispose(): void {
    // Remove the folder from tweakpane on dispose
    this._folder?.dispose();
  }
}

// Add the tool to the viewer
const tool = new CustomDevTool();
viewer.developerTools.addTool(tool);