import {
  _decorator,
  Component,
  instantiate,
  Layout,
  Node,
  ScrollView,
} from "cc";
import BaseUI from "../base/BaseUI";
import { ModuleDef } from "../../scripts/ModuleDef";
import { GameUILayers } from "../../scripts/GameUILayers";
import { Lobby } from "./Lobby";
import { CommonTabsTitle } from "../ui_base/CommonTabsTitle";
import { ShopItem } from "../ui_items/ShopItem";
import UIUtils from "../base/UIUtils";
const { ccclass, property } = _decorator;

@ccclass("BallUIShop")
export class BallUIShop extends BaseUI {
  static show() {
    tgx.UIMgr.inst.show(ModuleDef.BALL, "ui_lobby/ui_shop", GameUILayers.POPUP);
  }

  protected onDestroy(): void {
    Lobby.ins.enter();
  }

  private _tabs: CommonTabsTitle;
  protected onLoad(): void {
    super.onLoad();
    let self = this;
    this._ScrollView = this.FindAs("ScrollView", ScrollView);
    this._tpl = this.FindNode("ShopItem");
    this._tpl.active = false;
    this._tabs = this.getComponentInChildren(CommonTabsTitle);
    this._tabs.init(["MENU1", "MENU2"], {
      onTabClick(index) {
        self.tabSelect(index);
      },
    });
  }
  private _ScrollView: ScrollView;
  private _tpl: Node;
  async refreshUI() {
    this._ScrollView.content.removeAllChildren();

    for (let i = 0; i < 20; i++) {
      let item = instantiate(this._tpl);
      //   item.setPosition(0, 0, 0);
      this._ScrollView.content.addChild(item);
      let comp = item.getComponent(ShopItem);
      comp.init(i);
    }

    UIUtils.AnimateLayoutItems(this._ScrollView.content, {
      duration: 0.4,
      delayInterval: 100,
    });
  }

  private tabSelect(tab: number) {
    this._tabs.setSelect(tab);
    this.refreshUI();
  }

  protected start(): void {
    this.tabSelect(0);
  }
}