class BaseScene extends Phaser.Scene {
    
    nextSceneName: string;
    canMoveToNextSceneWithClick: boolean;    
    progressBar!: Phaser.GameObjects.Rectangle;
    game!: Phaser.Game;
    wholeCanvas!: Phaser.GameObjects.Zone;

    constructor(sceneName: string, nextSceneName: string, canMoveToNextSceneWithClick = false) {
        super(sceneName);
        this.nextSceneName = nextSceneName;
        this.canMoveToNextSceneWithClick = canMoveToNextSceneWithClick;


    }

    preload() {
        this.game = this.sys.game;

        this.progressBar = this.add.rectangle(0, this.game.canvas.height / 2, 0, 8, 0xffffff);
        this.loadingText = this.add.text(this.game.canvas.width / 2, this.game.canvas.height / 2 - 30, 'loading...', {});
        this.loadingText.setOrigin(0.5);

        // ロード進行中はプログレスバーの伸縮を進捗率に応じて変化させる。
        this.scene.scene.load.on('progress', this._updateBar.bind(this));
        // 個別のファイルのロードが完了したとき、ロードできたファイルの情報をコンソールに表示する。
        this.scene.scene.load.on('load', this._displayLoadedFileInfo.bind(this));
        // すべてのファイルのロードが完了したらローディング画面はフェードアウトしてメインのシーンに遷移する。
        this.scene.scene.load.on('complete', this._fadeoutMainCamera.bind(this));

    }

    /** 
     * ローディングプログレスバーの幅を進捗率に応じて伸縮する。
     * @param percentage ローディングの進捗率。 
     */
    private _updateBar(percentage: number) {

        this.progressBar.width = this.game.canvas.width * percentage;
    }

    /**
     * ロードが成功したファイルの情報をコンソールに表示するデバッグ用メソッド。
     * @param file ロードしたファイルオブジェクト。
     */
    private _displayLoadedFileInfo(file: any) {
        const src = file.src ? file.src : 'unknown/path';
        const key = file.src ? file.key : 'unknown/key';

        console.log(`load asset: key=${key}, src=${src}`);
    }

    /**
     * メインカメラを1秒かけてフェードアウトさせる。
     */
    private _fadeoutMainCamera() {

        this.cameras.main.fadeOut(1000, 0, 0, 0);

    }

    create() {

        // フェードアウトが完了したとき
        this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => {

            if (this.progressBar) {
                this.progressBar.destroy();
                this.loadingText.destroy();
            }

            this.cameras.main.fadeIn(1000, 0, 0, 0);
          
            this.displayBackground();
            this.displayText(this.nextSceneName);

        });

        const { width, height } = this.game.canvas;
      
        // クリックによる画面遷移を条件により実装
        if (this.canMoveToNextSceneWithClick) {

            /** キャンバス全体を領域とするゲームオブジェクト。クリック要素を持たせるために使う */
            this.wholeCanvas = this.add.zone(width / 2, height / 2, width, height);

            this.wholeCanvas.setInteractive({
                useHandCursor: true
            });

            this.wholeCanvas.on('pointerdown', () => {
                this.wholeCanvas.removeInteractive();
                this.changeScene(this.nextSceneName);
            });
        };

    }

    public changeScene(destinationSceneName: string) {

        this.cameras.main.fadeOut(800, 0, 0, 0);
        this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => {
            this.scene.start(destinationSceneName);
            
        });
    }

    public displayText(text: string){
      if (text){
        this.add.text(this.game.canvas.width / 2, 200, 'Go to ' + text).setOrigin(0.5);
      }
        
    }

    public displayBackground(){
      
    }

}

class Scene1 extends BaseScene {
  constructor(){
    super('scene1', 'scene2', true);
    
  }
  
  preload(){
    super.preload();
    
    this.load.image('space', 'https://upload.wikimedia.org/wikipedia/commons/e/ee/Artemis_Base_Camp.png');
  }
  
  create(){
    super.create();
    
  }
    
  public displayBackground(){
    this.add.image(0, 0, 'space');
  }
  
}

class Scene2 extends BaseScene {
  constructor(){
    super('scene2', '', false);
  }
  preload(){
    super.preload();
    
    this.load.image('galaxy', 'https://upload.wikimedia.org/wikipedia/commons/5/5e/Galaxy2.png');
  }
  
  create(){
    super.create();
  }
  public displayBackground(){
    this.add.image(0, 0, 'galaxy');
  }
}

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  resolution: window.devicePixelRatio,
  parent: 'game-app',
  scene: [Scene1, Scene2]
};

new Phaser.Game(config);