import { Button, Dropdown, VStack, type Widget } from '../../ui';
import { SceneVisibilityPopup } from '../panels/SceneVisibilityPopup';
import { TOOLBAR_ICON_SVG } from '../panels/toolbarIcons';
import type { EditorState } from '../state';
import { TabHeader } from '../TabHeader';
import type { SceneViewport } from './SceneViewport';

/** The scene tab: a header with Fit and the eye above the scene view and its tilemap panel. */
export class ScenePane extends VStack {
  readonly header = new TabHeader();
  /** Public for the check scripts. */
  readonly fitButton: Button;
  /** What the scene view shows of each type – symbols, names, collider outlines. */
  readonly visibilityButton: Dropdown;

  constructor(state: EditorState, view: SceneViewport, body: Widget) {
    super();
    this.fitButton = new Button('Fit', { onClick: () => view.fitScene() });
    this.visibilityButton = new Dropdown('', {
      icon: TOOLBAR_ICON_SVG.eye,
      onClick: () => new SceneVisibilityPopup(state).openBelow(this.visibilityButton),
    });
    this.header.add(this.fitButton);
    this.header.add(this.visibilityButton);
    this.add(this.header);
    this.add(body, 1);
  }
}