import { _decorator, Component, Node, Event } from "cc";
import BaseUI from "../../scripts/base/BaseUI";
import AB from "../../scripts/base/AB";
import { Tips } from "../../scripts/mgr/Tips";
import { instantiate } from "cc";
import { GemRechargeLayer } from "../layer/GemRechargeLayer";
import { Label } from "cc";
import { Color } from "cc";
import { director } from "cc";
import PushMsgM from "../../scripts/mgr/PushMsgM";
import EV, { EV_TYPE } from "../../scripts/mgr/EV";
import UserM from "../../scripts/api/UserM";

const { ccclass, property } = _decorator;

@ccclass("Hall")
export class Hall extends BaseUI {
  private static _ins: Hall = null;

  public static get ins(): Hall {
    return Hall._ins;
  }

  public async showLayer(path: string) {
    let layerPrefab = await AB.ins.loadPrefab(path);
    let layer = instantiate(layerPrefab);
    layer.parent = this.layerContainer;
    layer.active = true;
    return layer;
  }

  static readonly PageWallet = "Wallet";
  static readonly PagePlay = "Play";
  static readonly PageShop = "Shop";
  static readonly PageStorage = "Storage";
  static readonly PageRank = "Rank";

  private middleContainer: Node = null;
  private layerContainer: Node = null;
  protected onLoad(): void {
    super.onLoad();
    Hall._ins = this;
    this.middleContainer = this.FindNode("middleContainer");
    this.layerContainer = this.FindNode("layerContainer");
    this.switchPage(Hall.PagePlay);

    PushMsgM.ins.init();
  }

  private middlePages: Map<string, Node> = new Map();

  private _last_tab: Node;
  protected onBtnClick(name: string, event: Event, customEventData: any): void {
    super.onBtnClick(name, event, customEventData);

    switch (name) {
      case "btn_wallet":
        this.switchPage(Hall.PageWallet);
        break;
      case "btn_play":
        this.switchPage(Hall.PagePlay);
        break;
      case "btn_shop":
        this.switchPage(Hall.PageShop);
        break;
      case "btn_rank":
        this.switchPage(Hall.PageRank);
        break;
      case "btn_storage":
        this.switchPage(Hall.PageStorage);
        break;
      case "btn_claim_reward":
        // this.switchPage(Hall.PageClaimReward);
        break;
      case "btn_gem":
        GemRechargeLayer.show();
        break;
    }
  }
  private _lastPage: Node = null!;

  private _last_click_time: number = 0;
  async switchPage(name: string): Promise<BaseUI> {
    if (this._last_click_time > 0) {
      let now = Date.now();
      if (now - this._last_click_time < 500) {
        // Tips.show("Click too fast");
        return;
      }
    }
    this._last_click_time = Date.now();

    if (this._last_tab) {
      this._last_tab.getChildByName("value").getComponent(Label).color =
        new Color(255, 255, 255, 255);
      this._last_tab.getChildByName("select").active = false;
    }

    let target_name = "btn_" + name.toLowerCase();
    console.log("target", target_name);
    let target = this.FindNode(target_name);
    target.getChildByName("value").getComponent(Label).color = new Color(
      192,
      242,
      131,
      255
    );
    target.getChildByName("select").active = true;

    this._last_tab = target;
    if (this._lastPage) {
      this._lastPage.active = false;
      this._lastPage.getComponent(BaseUI)?.onHide();
    }

    let page = this.middlePages.get(name);
    if (!page) {
      let path = `prefab/hall/Page${name}`;
      let prefab = await AB.ins.loadPrefab(path);
      page = instantiate(prefab);

      this.middlePages.set(name, page);
      page.parent = this.middleContainer;
      page.setPosition(0, 0, 0);
      console.log("page instantiate", name);
    }
    this.middlePages.forEach((item) => {
      item.active = false;
    });

    page.getComponent(BaseUI)?.onShow();
    page.active = true;
    this._lastPage = page;
    return page.getComponent(BaseUI);
  }
}
