import Phaser from "phaser";
import { ReactiveScene } from "boardgame-phaser";
import { createButton } from "@/utils/createButton";
import { UI_CONFIG } from "@/config";
import { SceneKey } from "./types";

export class IndexScene extends ReactiveScene {
  constructor() {
    super("IndexScene");
  }

  create(): void {
    super.create();
    const { width, height } = this.scale;
    const centerX = width / 2;
    const centerY = height / 2;

    // Title
    this.add
      .text(centerX, centerY - 150, "Slay-the-Spire-Like Viewer", {
        fontSize: "36px",
        color: "#ffffff",
        fontStyle: "bold",
      })
      .setOrigin(0.5);

    // Subtitle
    this.add
      .text(centerX, centerY - 100, "Choose a viewer to explore:", {
        fontSize: "18px",
        color: "#aaaaaa",
      })
      .setOrigin(0.5);

    // Buttons
    const buttons: {
      label: string;
      scene: SceneKey;
      y: number;
    }[] = [
      { label: "Combat Test", scene: SceneKey.CombatTestScene, y: centerY },
      { label: "Map Viewer", scene: SceneKey.MapViewerScene, y: centerY + 70 },
      {
        label: "Grid Inventory Viewer",
        scene: SceneKey.GridViewerScene,
        y: centerY + 140,
      },
      {
        label: "Shape Viewer",
        scene: SceneKey.ShapeViewerScene,
        y: centerY + 210,
      },
      {
        label: "Inventory Test",
        scene: SceneKey.InventoryTestScene,
        y: centerY + 280,
      },
    ];

    for (const btn of buttons) {
      this.createButton(btn.label, btn.scene, centerX, btn.y);
    }
  }

  private createButton(
    label: string,
    targetScene: SceneKey,
    x: number,
    y: number,
  ): void {
    createButton({
      scene: this,
      label,
      x,
      y,
      width: UI_CONFIG.BUTTON_WIDTH_LARGE,
      height: UI_CONFIG.BUTTON_HEIGHT_LARGE,
      onClick: async () => {
        await this.sceneController.launch(targetScene);
      },
    });
  }
}