import Phaser from "phaser";
import img from "../assets/lapi.png";

import Button from "../components/Button";
import ShopItem from "../components/ShopItem";

import CHICO_BALD from "../assets/chico-bald.png";
import CHICO_CARPET from "../assets/chico-carpet.png";
import CHICO_CORNER from "../assets/chico-corner.png";
import CHICO_EARS from "../assets/chico-ears.png";
import CHICO_EATING from "../assets/chico-eating.png";
import CHICO_HOUSE from "../assets/chico-house.png";
import CHICO_LOAF from "../assets/chico-loaf.png";
import CHICO_NOSE from "../assets/chico-nose.png";
import CHICO_SLEEP from "../assets/chico-sleep.png";
import CHICO_VENT from "../assets/chico-vent.png";
import CHICO_WITH_EARS from "../assets/chico-withears.png";
import LOCKED from "../assets/question.jpg";

export default class Game extends Phaser.Scene {
  handlerScene = null;
  sceneStopped = false;
  chicos = 0;
  perSecond = 0;
  win = false;
  spinRemaining = 360;

  constructor() {
    super({ key: "game" });
  }

  preload() {
    this.load.image("img", img);
    this.load.image("chico-bald", CHICO_BALD);
    this.load.image("chico-carpet", CHICO_CARPET);
    this.load.image("chico-corner", CHICO_CORNER);
    this.load.image("chico-ears", CHICO_EARS);
    this.load.image("chico-eating", CHICO_EATING);
    this.load.image("chico-house", CHICO_HOUSE);
    this.load.image("chico-loaf", CHICO_LOAF);
    this.load.image("chico-nose", CHICO_NOSE);
    this.load.image("chico-sleep", CHICO_SLEEP);
    this.load.image("chico-vent", CHICO_VENT);
    this.load.image("chico-with-ears", CHICO_WITH_EARS);
    this.load.image("locked", LOCKED);

    this.width = this.game.screenBaseSize.width;
    this.height = this.game.screenBaseSize.height;

    this.handlerScene = this.scene.get("handler");
    this.handlerScene.sceneRunning = "game";
    this.sceneStopped = false;
  }

  create() {
    const { width, height } = this;
    // scene config
    this.handlerScene.updateResize(this);

    const title = this.add
      .text(width / 2, 0, "BALD CHICO TYCOON", {
        fontFamily: "sans-serif",
        fontSize: "32px",
        fontStyle: "bold",
        color: "#000000"
      })
      .setOrigin(0.5, 0);

    // game objects
    this.buttonContainer = this.add.container(0, 0);
    this.chicoButton = this.add
      .image(width / 4 + 8, title.height + height / 8, "chico-bald")
      .setScale(0.4)
      .setDepth(1);

    console.log(title.height, height, height / 8);

    this.chicoButton.firstClick = true;
    this.chicoButton.setInteractive({ useHandCursor: true });

    const infoButton = new Button(
      this,
      this.width - this.chicoButton.displayWidth - 8,
      title.height,
      this.chicoButton.displayWidth,
      this.chicoButton.displayHeight,
      16,
      "I have lost my ears. Please help me buy new ears. I do not want to be bald anymore.",
      19
    );
    this.add.existing(infoButton);
    const startText = this.add.text(
      this.width - this.chicoButton.displayWidth - 8,
      title.height + this.chicoButton.displayHeight - 36,
      "Press to start",
      {
        fontFamily: "sans-serif",
        fontSize: 20,
        fontStyle: "bold",
        color: "#000000",
        align: "center",
        fixedWidth: this.chicoButton.displayWidth
      }
    );

    this.numberWithCommas = (x) => {
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    };

    const handleChicoDown = () => {
      this.chicoButton.setScale(0.375);
    };

    const handleChicoUp = () => {
      this.chicos++;
      if (this.chicoButton.firstClick) {
        this.chicoButton.firstClick = false;
        infoButton.label.destroy();
        infoButton.destroy();
        startText.destroy();
      }
      this.chicoButton.setScale(0.4);
    };

    this.chicoButton.on("pointerdown", handleChicoDown);
    this.chicoButton.on("pointerup", handleChicoUp);
    infoButton.on("pointerdown", handleChicoDown);
    infoButton.on("pointerup", handleChicoUp);

    this.chicoLabel = this.add
      .text(width * (2 / 3), title.height + 36, "Chicos:", {
        fontFamily: "sans-serif",
        fontSize: 24,
        color: "#000000"
      })
      .setDepth(-1);

    this.chicoValue = this.add
      .text(
        width * (2 / 3) - this.chicoLabel.width * 1.5,
        this.chicoLabel.y + 24,
        this.chicos,
        {
          fontFamily: "sans-serif",
          fontSize: 36,
          color: "#000000",
          align: "center",
          fixedWidth: this.chicoLabel.width * 4,
          wordWrap: { width: this.chicoLabel.width * 4, useAdvancedWrap: true }
        }
      )
      .setDepth(-1);

    this.productionLabel = this.add
      .text(
        width * (2 / 3) - this.chicoLabel.width * 0.5,
        this.chicoValue.y + 40,
        "Production:",
        {
          fontFamily: "sans-serif",
          fontSize: 24,
          color: "#000000",
          align: "center",
          fixedWidth: this.chicoLabel.width * 2
        }
      )
      .setDepth(-1);

    this.productionValue = this.add
      .text(
        width * (2 / 3) - this.chicoLabel.width * 0.5,
        this.productionLabel.y + 24,
        this.perSecond,
        {
          fontFamily: "sans-serif",
          fontSize: 36,
          color: "#000000",
          align: "center",
          fixedWidth: this.chicoLabel.width * 2,
          wordWrap: { width: this.chicoLabel.width * 2, useAdvancedWrap: true }
        }
      )
      .setDepth(-1);

    this.thanksForEarsTop = this.add
      .text(
        width * (4 / 7),
        title.height - 4,
        "Thank you for buying\n me some new ears!",
        {
          fontFamily: "sans-serif",
          fontSize: 18,
          color: "#000000",
          align: "center"
        }
      )
      .setDepth(-1)
      .setVisible(false);

    this.thanksForEarsBottom = this.add
      .text(
        width * (3 / 5),
        this.productionValue.y + 40,
        "This is better than\n a bowlful of kale!",
        {
          fontFamily: "sans-serif",
          fontSize: 18,
          color: "#000000",
          align: "center"
        }
      )
      .setDepth(-1)
      .setVisible(false);

    const frameWidth = width;
    const frameHeight = height - this.chicoButton.displayHeight;
    const itemWidth = frameWidth / 3 - 8;
    const itemHeight = frameHeight / 3 - 16;

    const itemCarpet = new ShopItem(
      this,
      4,
      0,
      itemWidth,
      itemHeight,
      [],
      "Carpet Chico",
      "chico-carpet",
      1,
      0.2,
      "I'm Chico"
    );

    const itemEating = new ShopItem(
      this,
      frameWidth / 3 + 4,
      itemCarpet.y,
      itemWidth,
      itemHeight,
      [],
      "Eating Chico",
      "chico-eating",
      25,
      0.6,
      "Favorite time of the day"
    );

    const itemNose = new ShopItem(
      this,
      (frameWidth / 3) * 2 + 4,
      itemCarpet.y,
      itemWidth,
      itemHeight,
      [],
      "Big Nose Chico",
      "chico-nose",
      100,
      2,
      "I can smell you from here"
    );

    const itemHouse = new ShopItem(
      this,
      itemCarpet.x,
      itemHeight,
      itemWidth,
      itemHeight,
      [],
      "House Chico",
      "chico-house",
      200,
      5.5,
      "My lovely estate"
    );

    const itemLoaf = new ShopItem(
      this,
      itemEating.x,
      itemHouse.y,
      itemWidth,
      itemHeight,
      [],
      "Loaf Chico",
      "chico-loaf",
      400,
      12,
      "I'm Chico"
    );

    const itemVent = new ShopItem(
      this,
      itemNose.x,
      itemHouse.y,
      itemWidth,
      itemHeight,
      [],
      "Suspect Chico",
      "chico-vent",
      800,
      28,
      "Love good ventilation"
    );

    const itemCorner = new ShopItem(
      this,
      itemCarpet.x,
      (itemHeight + 4) * 2,
      itemWidth,
      itemHeight,
      [],
      "Corner Chico",
      "chico-corner",
      1600,
      64,
      "Where have I found myself now?"
    );

    const itemSleep = new ShopItem(
      this,
      itemEating.x,
      itemCorner.y,
      itemWidth,
      itemHeight,
      [],
      "Sleeping Chico",
      "chico-sleep",
      3200,
      144,
      "Long day of being a Chico"
    );

    const itemEars = new ShopItem(
      this,
      itemNose.x,
      itemCorner.y,
      itemWidth,
      itemHeight,
      [],
      "Chico Ears",
      "chico-ears",
      100000,
      0,
      "",
      true
    );

    this.shopItems = [
      itemCarpet,
      itemEating,
      itemNose,
      itemVent,
      itemHouse,
      itemLoaf,
      itemCorner,
      itemSleep,
      itemEars
    ];

    const shopFrame = new Phaser.GameObjects.Container(
      this,
      0,
      this.chicoButton.displayHeight + 36,
      this.shopItems
    );

    this.add.existing(shopFrame);
  }

  update(time, delta) {
    this.chicos += this.perSecond * (delta / 1000);
    this.chicoValue.setText(this.numberWithCommas(Math.floor(this.chicos)));
    this.productionValue.setText(
      this.numberWithCommas(Math.round(this.perSecond * 10) / 10) + "/s"
    );
    for (let i = 0; i < this.shopItems.length; i++) {
      const item = this.shopItems[i];
      if (item.locked && item.startCost <= this.chicos) {
        item.locked = false;
        item.lockedImg.destroy();
        item.label.visible = true;
      }
    }
    if (this.shopItems[this.shopItems.length - 1].count > 0 && !this.win) {
      this.win = true;
      this.chicoButton.setTexture("chico-with-ears");
      this.thanksForEarsTop.setVisible(true);
      this.thanksForEarsBottom.setVisible(true);
      this.time.addEvent({
        delay: 30000,
        callback: () => {
          this.thanksForEarsTop.setVisible(false);
          this.thanksForEarsBottom.setVisible(false);
        }
      });
    }
    if (this.win && this.spinRemaining > 0) {
      this.spinRemaining--;
      this.chicoButton.angle += 2;
    }
  }
}
