import Phaser from "phaser";

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

export default class ShopItem extends Phaser.GameObjects.Container {
  constructor(
    scene,
    x,
    y,
    width,
    height = width,
    children,
    label = "Sample Chico",
    imgKey = "",
    startCost = 1,
    production = 0,
    description = "",
    ears = false
  ) {
    super(scene, x, y, children);
    this.locked = true;
    this.startCost = startCost;
    this.imgKey = imgKey;
    this.nextCost = startCost;
    this.count = 0;

    this.label = scene.add.text(0, 0, label, {
      fontFamily: "sans-serif",
      fontSize: 22,
      color: "#000000",
    })
    
    this.label.visible = false;

    this.img = scene.add
      .image(0, this.label.height + 2, imgKey)
      .setScale(0.25)
      .setOrigin(0, 0);

    this.lockedImg = scene.add
      .image(0, this.label.height + 2, "locked")
      .setScale(0.71)
      .setOrigin(-0.05, 0.01);

    this.description = scene.add
      .text(width / 2, this.label.height + 8, description, {
        fontFamily: "sans-serif",
        fontSize: 17,
        color: "#ffffff",
        stroke: "#000000",
        strokeThickness: 1,
        align: "left",
        fixedWidth: this.img.displayWidth,
        wordWrap: { width: this.img.displayWidth, useAdvancedWrap: true }
      })
      .setOrigin(0.475, 0.1);
    this.description.visible = false;

    this.costLabel = scene.add
      .text(
        width / 2,
        this.label.height + this.img.displayHeight - 20,
        `Cost: ${this.nextCost}`,
        {
          fontFamily: "sans-serif",
          fontSize: 18,
          color: "#ffffff",
          stroke: "#000000",
          strokeThickness: 1,
          align: "left",
          fixedWidth: this.img.displayWidth,
          wordWrap: { width: this.img.displayWidth, useAdvancedWrap: true }
        }
      )
      .setOrigin(0.475, 0.1);
    this.costLabel.visible = false;

    this.countLabel = scene.add
      .text(width / 2, this.costLabel.y - 18, `Count: ${this.count}`, {
        fontFamily: "sans-serif",
        fontSize: 18,
        color: "#ffffff",
        stroke: "#000000",
        strokeThickness: 1,
        align: "left",
        fixedWidth: this.img.displayWidth,
        wordWrap: { width: this.img.displayWidth, useAdvancedWrap: true }
      })
      .setOrigin(0.475, 0.1);
    this.countLabel.visible = false;

    this.label.setX(width / 2).setOrigin(0.5, 0);
    this.img.setX((width - this.img.displayWidth) / 2);

    const setStatsVisible = (visible) => {
      this.description.visible = visible;
      this.costLabel.visible = visible;
      this.countLabel.visible = visible;
    };

    scene.input.on("pointerdown", (pointer) => {
      if (pointer.wasTouch) {
        setStatsVisible(false); // pointerout doesn't work on mobile
      }
    });

    this.img.setInteractive();
    this.img.on("pointerover", () => setStatsVisible(true));
    this.img.on("pointerout", (pointer) => {
      if (!pointer.wasTouch) {
        setStatsVisible(false);
      }
    });

    let items = [
      this.label,
      this.img,
      this.description,
      this.countLabel,
      this.lockedImg,
      this.costLabel,
    ];

    if (ears) {
      this.buyEars = new Button(
        scene,
        8,
        height - 25,
        width - 16,
        24,
        8,
        "Buy Chico Ears",
        16
      );
      this.buyEars.on("pointerup", () => {
        if (this.nextCost <= scene.chicos) {
          scene.chicos -= this.nextCost;
          this.count++;
          this.countLabel.setText(`Count: ${this.count}`);
        } else {
          this.buyEars.setLabel("No Chicos");
          setTimeout(() => {
            this.buyEars.setLabel("Buy Chico Ears");
          }, 2000);
        }
      });
      scene.add.existing(this.buyEars);
      items = [
        ...items,
        this.buyEars,
        this.buyEars.pressedRect,
        this.buyEars.label
      ];
    } else {
      this.buyOne = new Button(
        scene,
        4,
        height - 24,
        width / 2 - 8,
        24,
        8,
        "Buy One",
        14
      );
      scene.add.existing(this.buyOne);
      this.buyOne.on("pointerup", () => {
        if (this.nextCost <= scene.chicos) {
          scene.chicos -= this.nextCost;
          scene.perSecond += production;
          this.count++;
          this.countLabel.setText(`Count: ${this.count}`);
          this.nextCost = Math.round(startCost * Math.pow(1.05, this.count + 1) + 1);          this.costLabel.setText(`Cost: ${this.nextCost}`);
        } else {
          this.buyOne.setLabel("No Chicos");
          setTimeout(() => {
            this.buyOne.setLabel("Buy One");
          }, 2000);
        }
      });
      this.buyOne.on("pointerover", (pointer) => {
        setStatsVisible(true);
      });
      this.buyOne.on("pointerout", (pointer) => {
        if (!pointer.wasTouch) {
          setStatsVisible(false);
        }
      });

      this.buyMax = new Button(
        scene,
        width / 2 + 4,
        height - 24,
        width / 2 - 8,
        24,
        8,
        "Buy Max",
        14
      );
      scene.add.existing(this.buyMax);

      this.buyMax.on("pointerup", () => {
        let bought = 0;
        while (this.nextCost <= scene.chicos) {
          bought++;
          scene.chicos -= this.nextCost;
          scene.perSecond += production;
          this.count++;
          this.countLabel.setText(`Count: ${this.count}`);
          this.nextCost = Math.round((this.nextCost + 1) * 1.4);
          this.costLabel.setText(`Cost: ${this.nextCost}`);
        }
        this.buyMax.setLabel(`Bought ${bought}`);
        setTimeout(() => {
          this.buyMax.setLabel("Buy Max");
        }, 2000);
      });
      this.buyMax.on("pointerover", () => {
        setStatsVisible(true);
      });
      this.buyMax.on("pointerout", (pointer) => {
        if (!pointer.wasTouch) {
          setStatsVisible(false);
        }
      });

      items = [
        ...items,
        this.buyOne,
        this.buyOne.pressedRect,
        this.buyOne.label,
        this.buyMax,
        this.buyMax.pressedRect,
        this.buyMax.label
      ];
    }

    this.add(items);

    scene.add.existing(this);
  }
}
