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';

const { ccclass, property } = _decorator;

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

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

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

  @property(EditBox)
  private nickname: EditBox = null;

  private _userInfo: any = null;

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

    this._userInfo = AppKernel.stores.mainStore.userInfo;
    const { NickName } = this._userInfo;
    this.nickname.placeholder = NickName;

  }

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

  private async onBtnConfirmClick() {
    const newName = this.nickname.string;
    if (this._userInfo.NickName === newName || !newName) {
      AppKernel.ui.toast("Cannot use the same nickname");
    } else if (!this.validateNickname(newName)) {
      AppKernel.ui.toast("Invalid format")
    } else {
      const res = await AppKernel.stores.mainStore.reqChangeUserInfo({ NickName: newName });
      if (res) {
        await AppKernel.ui.close(UIViewID.ChangeName);
        AppKernel.ui.toast("Change success")
      }
    }
  }

  private validateNickname(name: string): boolean {
    const str = name.trim();
    const reg = /^[a-zA-Z][a-zA-Z0-9_]{2,19}$/;
    return reg.test(str);
  }


}