import Phaser from "phaser";

export class PersistentButtonsComponent {
  private scene: Phaser.Scene;
  private container!: Phaser.GameObjects.Container;

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

  create() {
    const { height } = this.scene.scale;
    this.container = this.scene.add.container(20, height - 20);

    this.container.setScrollFactor(0).setDepth(1500);

    const btnStyle = { 
      fontSize: "14px", 
      color: "#ffffff", 
      backgroundColor: "#1a1a1a", 
      padding: { x: 10, y: 6 },
      fontStyle: "bold"
    };
    
    const createBtn = (x: number, text: string, event: string) => {
        const btn = this.scene.add.text(x, 0, text, btnStyle)
            .setOrigin(0, 1)
            .setInteractive({ useHandCursor: true });
        
        btn.on("pointerover", () => btn.setBackgroundColor("#333333"));
        btn.on("pointerout", () => btn.setBackgroundColor("#1a1a1a"));
        btn.on("pointerdown", () => {
            btn.setBackgroundColor("#444444");
            const gameScene = this.scene.scene.get("GameScene");
            gameScene.events.emit(event);
        });
        btn.on("pointerup", () => btn.setBackgroundColor("#333333"));
        
        this.container.add(btn);
        return btn;
    };

    createBtn(0, "MENU (ESC)", "toggle-menu");
    createBtn(105, "STATS (C)", "toggle-character");
    createBtn(200, "BACKPACK (I)", "toggle-inventory");
    createBtn(320, "MAP (M)", "toggle-minimap");
  }
}
