import Phaser from "phaser";

export class MenuComponent {
  private scene: Phaser.Scene;
  private 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, 300, 400, 0x000000, 0.85);
    bg.setStrokeStyle(4, 0x444444);
    this.container.add(bg);

    const title = this.scene.add.text(0, -170, "MENU", {
      fontSize: "32px",
      color: "#ffffff",
      fontStyle: "bold"
    }).setOrigin(0.5);
    this.container.add(title);

    this.addButtons();
  }

  private addButtons() {
    const btnStyle = { fontSize: "20px", color: "#ffffff", backgroundColor: "#333333", padding: { x: 10, y: 5 } };
    
    const resumeBtn = this.scene.add.text(0, -80, "Resume (ESC)", btnStyle).setOrigin(0.5).setInteractive({ useHandCursor: true });
    resumeBtn.on("pointerdown", () => this.scene.events.emit("close-menu"));
    this.container.add(resumeBtn);

    const inventoryBtn = this.scene.add.text(0, -20, "Inventory (I)", btnStyle).setOrigin(0.5).setInteractive({ useHandCursor: true });
    inventoryBtn.on("pointerdown", () => this.scene.events.emit("toggle-inventory"));
    this.container.add(inventoryBtn);

    const characterBtn = this.scene.add.text(0, 40, "Stats (C)", btnStyle).setOrigin(0.5).setInteractive({ useHandCursor: true });
    characterBtn.on("pointerdown", () => this.scene.events.emit("toggle-character"));
    this.container.add(characterBtn);

    const minimapBtn = this.scene.add.text(0, 100, "Map (M)", btnStyle).setOrigin(0.5).setInteractive({ useHandCursor: true });
    minimapBtn.on("pointerdown", () => this.scene.events.emit("toggle-minimap"));
    this.container.add(minimapBtn);
  }

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

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