import { Component, ElementRef, inject, ViewChild } from '@angular/core';
import Phaser from 'phaser';
import { MapScene } from './scene/map.scene';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { GameService } from './service/game.service';
import { ShipDialogComponent } from './components/dialog/ship-dialog/ship-dialog.component';
import { PlanetDialogComponent } from './components/dialog/planet-dialog/planet-dialog.component';
import { DragDropModule } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-root',
  imports: [MatDialogModule, ShipDialogComponent, PlanetDialogComponent, DragDropModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {

  public dialog = inject(MatDialog);
  public gameService = inject(GameService);

  @ViewChild('gameContainer', { static: true }) gameContainer!: ElementRef;

  ngAfterViewInit(): void {
    const scene = new MapScene();
    scene.gameService = this.gameService;

    const config: Phaser.Types.Core.GameConfig = {
      type: Phaser.AUTO,
      width: window.innerWidth,
      height: window.innerHeight,
      disableContextMenu: true,
      scale: {
        mode: Phaser.Scale.EXPAND,
        autoCenter: Phaser.Scale.CENTER_BOTH,

      },
      parent: this.gameContainer.nativeElement,
      backgroundColor: '#0c0e1a',
      scene: [scene],
      render: {
        pixelArt: false,
        antialias: true,
      },

      physics: {
        default: 'arcade',
        arcade: {
          debug: true,
          timeScale: 1
        }
      }
    };

    const game = new Phaser.Game(config);
  }
}
