class PreloadScene extends Phaser.Scene {
  constructor() {
    super({ key: "PreloadScene" });
    this.currentWidth = 0;
  }

  preload() {
    const boxX = 240;
    const boxY = 290;
    const boxWidth = 320;
    const boxHeight = 20;

    let progressBox = this.add.graphics();
    progressBox.fillStyle(0x222222, 0.8);
    progressBox.fillRoundedRect(boxX, boxY, boxWidth, boxHeight, boxHeight / 2);

    let loadingText = this.add
      .text(config.width / 2, config.height / 2, "Chargement", {
        fontSize: "20px",
        fill: "#ffffff"
      })
      .setOrigin(0.5, 0.5);

    let progressBar = this.add.graphics();
    this.load.on("progress", (value) => {
      let targetWidth = (boxWidth - 10) * value;

      this.tweens.add({
        targets: this,
        currentWidth: targetWidth,
        duration: 500,
        ease: "Linear",
        onUpdate: () => {
          progressBar.clear();
          progressBar.fillStyle(0x00ff00, 1);
          progressBar.fillRoundedRect(
            boxX + 5,
            boxY + 5,
            this.currentWidth,
            boxHeight - 10,
            (boxHeight - 10) / 2
          );
        },
        onComplete: () => {
          loadingText.setText("Chargement ✔");
        }
      });
    });

    this.load.on("complete", () => {
      this.time.delayedCall(1500, () => {
        this.cameras.main.fadeOut(1000, 0, 0, 0);
      });
      this.cameras.main.on("camerafadeoutcomplete", () => {
        this.scene.start("SceneA");
      });
    });

    // Préchargement des ressources
    this.load.image("bg", "https://assets.codepen.io/9367036/forest1.jpg");
    this.load.image("bg2", "https://assets.codepen.io/9367036/forest3.jpg");
  }

  create() {}
}

class SceneA extends Phaser.Scene {
  constructor() {
    super({ key: "SceneA" });
  }

  preload() {}

  create() {
    this.cameras.main.fadeIn(500, 0, 0, 0);

    let background = this.add.image(0, 0, "bg").setOrigin(0, 0);
    background.displayWidth = config.width;
    background.displayHeight = config.height;

    let playText = this.add.text(400, 300, "Scène B", {
      fontSize: "32px",
      color: "#ffffff",
      backgroundColor: "#000000",
      padding: { x: 20, y: 5 },
      align: "center"
    });
    playText.setOrigin(0.5);
    playText.setInteractive({ useHandCursor: true });

    playText.once("pointerdown", () => {
      const fx = this.cameras.main.postFX.addWipe();
      this.scene.transition({
        target: "SceneB",
        duration: 1000,
        moveBelow: true,
        onUpdate: (progress) => {
          fx.progress = progress;
        }
      });
    });
  }

  update() {}
}

class SceneB extends Phaser.Scene {
  constructor() {
    super({ key: "SceneB" });
  }

  preload() {}

  create() {
    let background = this.add.image(0, 0, "bg2").setOrigin(0, 0);
    background.displayWidth = config.width;
    background.displayHeight = config.height;

    let playText = this.add.text(400, 300, "Scène A", {
      fontSize: "32px",
      color: "#000000",
      backgroundColor: "#ffffff",
      padding: { x: 20, y: 5 },
      align: "center"
    });
    playText.setOrigin(0.5);
    playText.setInteractive({ useHandCursor: true });

    playText.once("pointerdown", () => {
      const fx = this.cameras.main.postFX.addWipe();
      this.scene.transition({
        target: "SceneA",
        duration: 1000,
        moveBelow: true,
        onUpdate: (progress) => {
          fx.progress = progress;
        }
      });
    });
  }

  update() {}
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 400,
  scene: [PreloadScene, SceneA, SceneB]
};

const game = new Phaser.Game(config);

//activateControls(["LMB"]);