import { _decorator, Button, Color, EditBox, instantiate, Label, Node, RichText, Sprite, SpriteFrame, UITransform } from 'cc';
import { UIViewID } from '@scripts/define/UIDefine';
import { UICloseReason } from '@scripts/framework/ui/UILayer';
import { addBtnClick } from '@scripts/utils/UIHelper';
import { AppKernel } from '@scripts/app/AppKernel';
import { SelectBox } from '@scripts/components/selectBox/SelectBox';
import { UIPopup } from '@scripts/framework/ui/UIPopup';
import { setSpriteFrame } from '@scripts/utils/ResHelper';

const { ccclass, property } = _decorator;

@ccclass('ChangeAvatar')
export class ChangeAvatar extends UIPopup {
  readonly viewId = UIViewID.ChangeAvatar;

  @property(Node)
  private btn_close: Node = null;

  @property(Node)
  private btn_confirm: Node = null;

  @property(Node)
  private item_avatar: Node = null;

  @property(Node)
  private layout_select: Node = null;


  private items_avatar: Node[] = [];
  private selectedAvatarId: number = 0;

  protected onCreate(): void | Promise<void> {
    addBtnClick(this.btn_close, this.onBtnCloseClick, this);
    addBtnClick(this.btn_confirm, this.onBtnConfirmClick, this);

    this.initView();
  }

  private initView() {
    const { FaceID } = AppKernel.stores.mainStore.userInfo;
    for (let i = 1; i <= 10; i++) {
      let node = instantiate(this.item_avatar);
      node.parent = this.layout_select;
      node.active = true;

      const sprite_avatar = node.getChildByName('avatar').getComponent(Sprite);
      const selected = node.getChildByName('selected');
      setSpriteFrame(sprite_avatar, "public/avatar/" + i, "lobbyRes");
      selected.active = i == FaceID;

      addBtnClick(node, () => this.onSelectAvatar(i), this);

      this.items_avatar.push(node);
    }

  }



  private onBtnCloseClick() {
    AppKernel.ui.close(UIViewID.ChangeAvatar);
  }

  private async onBtnConfirmClick() {
    if (this.selectedAvatarId >= 1) {
      const res = await AppKernel.stores.mainStore.reqChangeUserInfo({ FaceID: this.selectedAvatarId });
      if (res) {
        await AppKernel.ui.close(UIViewID.ChangeAvatar);
        AppKernel.ui.toast("Change success")
      }
    }
  }

  private onSelectAvatar(id: number) {
    if (this.selectedAvatarId == id) return;
    console.log("onSelectAvatar", id);

    this.selectedAvatarId = id;
    this.items_avatar.forEach((item, i) => {
      const selected = item.getChildByName('selected');
      selected.active = (i + 1 == id);
    })
  }


}