import { _decorator, Component, Node } from "cc";
import BaseUI from "../../scripts/base/BaseUI";
import { CommonTabsTitle, OnTabClickListener } from "../common/CommonTabsTitle";
import { Tips } from "../../scripts/mgr/Tips";
import { ScrollView } from "cc";
import { instantiate } from "cc";
import { GamePassItem } from "../item/GamePassItem";
import PogHttp from "../../scripts/net/PogHttp";
import { PogBoosterItem } from "../item/PogBoosterItem";
import ShopM from "../../scripts/api/ShopM";
import UserM from "../../scripts/api/UserM";
import { GoodsId } from "../../scripts/api/GoodsId";
import ConfigM, { ClientConfig } from "../../scripts/api/ConfigM";
import { Sprite } from "cc";
import { Event } from "cc";
import { FlyContainer, FlyType } from "./FlyContainer";
import { RewardLayer } from "../layer/RewardLayer";
import ItemsM from "../../scripts/mgr/ItemsM";
import EV, { EV_TYPE } from "../../scripts/mgr/EV";
const { ccclass, property } = _decorator;

@ccclass("PageShop")
export class PageShop extends BaseUI implements OnTabClickListener {
  switchTab(tab: { index: number; name: string }) {
    this.onTabClick(tab.index);
  }
  protected onLoad(): void {
    super.onLoad();
    this.init();
  }
  static readonly TAB_GAME_PASS = {
    index: 0,
    name: "ScrollViewGamePass",
  };
  static readonly TAB_POG_BOOSTER = {
    index: 1,
    name: "ScrollViewPogBooster",
  };
  static readonly TAB_ITEM_BOX = {
    index: 2,
    name: "ScrollViewItemBox",
  };
  static readonly TAB_POG_BOX = { index: 3, name: "ScrollViewPogBox" };
  private _tabsTitle: CommonTabsTitle = null;
  init() {
    this._tabsTitle = this.getComponentInChildren(CommonTabsTitle);
    let titles = ["GAME PASS", "POG CRIT", "ITEM BOX", "POG BOX"];
    this._tabsTitle.init(titles, this);

    this.onTabClick(PageShop.TAB_GAME_PASS.index);

    this.FindNode("GamePassItem").active = false;
    this.FindNode("PogBoosterItem").active = false;
  }
  onTabClick(index: number) {
    this._tabsTitle.setSelect(index);
    this.FindNode("ShopPageContainer").children.forEach((child) => {
      child.active = false;
    });

    switch (index) {
      case PageShop.TAB_GAME_PASS.index:
        this.showGamePass();
        break;
      case PageShop.TAB_POG_BOOSTER.index:
        this.showPogBooster(2);
        break;
      case PageShop.TAB_ITEM_BOX.index:
        // this.FindNode(PageShop.TAB_ITEM_BOX.name).active = true;
        this.showPogBooster(3);
        break;
      case PageShop.TAB_POG_BOX.index:
        // this.FindNode(PageShop.TAB_POG_BOX.name).active = true;
        this.showPogBooster(4);
        break;
    }
  }

  private showHelp(type: number) {
    this.FindNode("HelpLayout").children.forEach((child) => {
      child.active = false;
    });
    this.FindNode("HelpLayout").children[type - 2].active = true;
  }
  async showPogBooster(type: number) {
    this.showHelp(type);
    // let helpTitle = ConfigM.ins.getHelpTitle(type);
    // this.setText("lbl_help_title", helpTitle);
    let helpDesc = ConfigM.ins.getHelpDesc(type);
    this.setText("lbl_help_desc", helpDesc);

    this.FindNode(PageShop.TAB_POG_BOOSTER.name).active = true;
    let scrollView = this.FindNode(PageShop.TAB_POG_BOOSTER.name).getComponent(
      ScrollView
    );
    scrollView.node.active = true;
    let grid = scrollView.content.getChildByName("grid");
    grid.removeAllChildren();

    let tpl = this.FindNode("PogBoosterItem");
    let list = await ShopM.ins.getShopListByStoreId(type);
    for (let item of list) {
      let itemNode = instantiate(tpl);
      itemNode.active = true;
      grid.addChild(itemNode);
      itemNode.getComponent(PogBoosterItem).init(type, item);
    }
  }

  async initGamePassShard() {
    let puzzle_count = UserM.ins.getGoodsCount(GoodsId.GAME_PASS_SHARD);

    this.setText(
      "lbl_game_pass_puzzle",
      "" + puzzle_count + "/" + ClientConfig.PuzzleToGamePassCount
    );

    if (puzzle_count < ClientConfig.PuzzleToGamePassCount) {
      let node = this.FindNode("btn_puzzle_to_claim_game_pass");
      node.getComponent(Sprite).grayscale = true;
    }
  }

  async showGamePass() {
    this.initGamePassShard();

    let scrollView = this.FindNode(PageShop.TAB_GAME_PASS.name).getComponent(
      ScrollView
    );
    scrollView.node.active = true;
    // if (scrollView.content.children.length > 0) {
    //   return;
    // }
    scrollView.content.removeAllChildren();
    let gamePassItem = this.FindNode("GamePassItem");

    let list = await ShopM.ins.getShopListByStoreId(1);

    for (let i = 0; i < list.length; i++) {
      let item = instantiate(gamePassItem);
      item.active = true;
      scrollView.content.addChild(item);

      let c = ConfigM.ins.getShopListByStoreId(1)[i];
      item.getComponent(GamePassItem).init(list[i], c);
    }
  }

  async PuzzleToGamePass() {
    // Tips.show("Coming soon");

    // FlyContainer.ins.fly(FlyType.POG);
    let count = UserM.ins.getGoodsCount(GoodsId.GAME_PASS_SHARD);
    if (count < ClientConfig.PuzzleToGamePassCount) {
      Tips.show("Insufficient Game Shards");
      return;
    }

    UserM.ins.subtractGoods(
      GoodsId.GAME_PASS_SHARD,
      ClientConfig.PuzzleToGamePassCount
    );

    let result = await ShopM.ins.shardToGamePass();
    if (result) {
      RewardLayer.show([
        {
          id: GoodsId.GAME_PASS,
          count: 1,
        },
      ]);
      await UserM.ins.refreshInfo();
    }
    this.initGamePassShard();
  }
  protected simpleOnBtnClick(name: string): void {
    switch (name) {
      case "btn_puzzle_to_claim_game_pass":
        this.PuzzleToGamePass();
        break;
    }
  }
}
