import Phaser from 'phaser';
import LU from '../display/layout';
import { centerGameObjects } from '../utils';

export default class extends Phaser.State {
  init() {
    this.stage.disableVisibilityChange = true;

    this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;

    this.game.scale.setResizeCallback(x => {
      let DPR = this.game.device.pixelRatio;

      x.setGameSize(window.innerWidth * DPR, (window.innerHeight * DPR));
      x.setUserScale(1 / DPR, 1 / DPR);
    });

    this.game.scale.onSizeChange.add(x => this.game.state.callbackContext.resize());

    this.scale.refresh();

    LU.RefreshSizes();
  }

  preload() {
    this.loaderBg = this.add.sprite(this.game.world.centerX, this.game.world.centerY, 'loaderBg');
    this.loaderBar = this.add.sprite(this.game.world.centerX, this.game.world.centerY, 'loaderBar');
    centerGameObjects([this.loaderBg, this.loaderBar])

    this.load.setPreloadSprite(this.loaderBar);
    //
    // load your assets
    //
    this.load.image('map1', './assets/maps/2.jpg');
    this.game.load.atlas('assets', 'assets/atlas/assets.png', 'assets/atlas/assets.json', null, Phaser.Loader.TEXTURE_ATLAS_JSON_ARRAY);

    game.load.image('marco', 'assets/marco.png');
    game.load.image('portada', 'assets/portada.png');
    game.load.image('contraportada', 'assets/contraportada.png');

    game.load.image('intro_1_bg', 'assets/primera_ilu2.png');
    game.load.image('intro_1_nina', 'assets/primera_ilu3.png');
    game.load.image('intro_2_bg', 'assets/segundailu3.png');
    game.load.image('intro_2_nina', 'assets/segundailu4.png');
    game.load.image('intro_2_fg', 'assets/segundailu2.png');
    game.load.image('intro_2_mask', 'assets/segundailu_masc.png');
    game.load.image('intro_3_bg', 'assets/tercerailustracion2.png');
    game.load.image('intro_3_nina', 'assets/tercerailustracion3.png');
    game.load.image('intro_4_bg', 'assets/cuarta_ilustracion1.png');
    game.load.image('intro_4_nina', 'assets/cuarta_ilustracion2.png');
    game.load.image('intro_4_mask', 'assets/cuarta_ilustracionmarc.png');
    game.load.image('intro_5_bg', 'assets/de_la_mano_a_dedo1.png');
    game.load.image('intro_5_nina', 'assets/de_la_mano_a_dedo2.png');

    game.load.image('outro_1_bg', 'assets/sexta_ilu2.png');
    game.load.image('outro_1_nina', 'assets/sexta_ilu3.png');
    game.load.image('outro_2_bg', 'assets/7_ilustracion.png');
    game.load.image('outro_3_bg', 'assets/ultima_ilustracion.png');
    
    game.load.image('endGame', 'assets/game_over.png');
    game.load.image('goreOverlay', 'assets/goreoverlay.png');
    game.load.image('golpe', 'assets/golpe.png');
    game.load.image('blood', 'assets/sangre.png');


    // AUDIO
    game.load.audio('perc', ['assets/music/camino_perc.mp3', 'assets/music/camino_perc.ogg']);
    game.load.audio('strings', ['assets/music/camino_strings.mp3', 'assets/music/camino_strings.ogg']);
    game.load.audio('30secs', ['assets/music/last_30_secs.mp3', 'assets/music/last_30_secs.ogg']);

  }
  
  create() {
    this.state.start('Game');
  }
}
