import Phaser from "phaser";

export abstract class OverlayComponent {
  protected scene: Phaser.Scene;
  protected container!: Phaser.GameObjects.Container;
  public isOpen: boolean = false;

  constructor(scene: Phaser.Scene) {
    this.scene = scene;
  }

  create() {
    const { width, height } = this.scene.scale;
    this.container = this.scene.add.container(width / 2, height / 2);
    this.container.setScrollFactor(0).setDepth(2000).setVisible(false);

    const bg = this.scene.add.rectangle(0, 0, 700, 500, 0x000000, 0.9);
    bg.setStrokeStyle(2, 0x666666);
    this.container.add(bg);

    this.setupContent();
  }

  protected abstract setupContent(): void;

  toggle() {
    this.isOpen = !this.isOpen;
    this.container.setVisible(this.isOpen);
    if (this.isOpen) this.onOpen();
    return this.isOpen;
  }

  setVisible(visible: boolean) {
    this.isOpen = visible;
    this.container.setVisible(visible);
    if (visible) this.onOpen();
  }

  protected onOpen() {}
}
