'use strict';
import { PhaserScene } from '../../common/utils/const/phaser-scene-enum';
import Phaser from 'phaser';

export default class GameWorldScene extends Phaser.Scene {

  constructor(playerBlue, playerRed) {
    super({ key: PhaserScene.GAME_WORLD, active: false });
    this.playerBlue = playerBlue;
    this.playerRed = playerRed;
  }

  preload() {
    console.log('Preload');

  }

  create() {
    console.log('create');
    render(this, this.playerBlue.getHeroesDeck(),0 );
    render(this, this.playerRed.getHeroesDeck(),300 );
  }

  update() {

  }
}

function addCard(x, y, phaser, heroName, heroCost, heroPower, heroDesc) {
  let textStyle = {
    font: "normal 12px Arial",
    fill: '#000000',
    align: 'center',
    boundsAlignH: "center", // bounds center align horizontally
    boundsAlignV: "middle" // bounds center align vertically
  };
  let graphics = phaser.add.graphics(0, 0);
  let color = 0x654321;
  let thickness = 2;
  let alpha = 1;

  graphics.lineStyle(thickness, color, alpha);
  graphics.strokeRect(0, 0, 80, 120);
  let text = `${heroName}\ncost : ${heroCost}\npower : ${heroPower}`;
  let label = phaser.add.text(3, 3, text, textStyle);
  label.setOrigin(0, 0);
  let container = phaser.add.container(x, y, [graphics, label]).setSize(5, 5);
  // container.setOrigin(0, 0);
}


  function render(game, heroesSet, offset) {

    let i = 0;
    let j = 0;
    heroesSet.forEach(hero => {
      let x = 10 + (i * 80) + 5;
      let y = 10 + offset + (j * 120) + 5;
      addCard(x, y, game, hero.name, hero.cost, hero.power, hero.ability.description);
      if (x >= 1040) {
        i = 0;
        j++;
      } else {

        i++;
      }

    });
  }
