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 { checkIsEmail } from '@scripts/utils/Helper';

const { ccclass, property } = _decorator;

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

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

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

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

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

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

  @property(Label)
  private _account: string = '';
  private _verify_code: string = '';

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

    this.account.node.on(EditBox.EventType.TEXT_CHANGED, this.onAccountTextChanged, this);
    this.verify_code.node.on(EditBox.EventType.TEXT_CHANGED, this.onVerifyCodeTextChanged, this);
  }

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

  private async onBtnConfirmClick() {
    const account = this.account.string;
    const code = this.verify_code.string;
    const isReady = !!account && !!code;
    if (!isReady) return;

    const res = await AppKernel.stores.mainStore.reqUnBind3rdConfirm({
      verify_type: checkIsEmail(account) ? "email" : "phone",
      code
    });
    if (res) {
      await AppKernel.ui.close(UIViewID.UnbindAccount);
      AppKernel.ui.toast("Unbind success");
    }
  }

  private onTextChanged() {
    const isReady = !!this._account && !!this._verify_code;
    this.btn_confirm.active = isReady;
    this.btn_grey.active = !isReady;
  }

  private onAccountTextChanged(editBox: EditBox) {
    console.log('onAccountTextChanged', editBox.string);
    this._account = editBox.string;
    this.onTextChanged();
  }

  private onVerifyCodeTextChanged(editBox: EditBox) {
    console.log('onVerifyCodeTextChanged', editBox.string);
    this._verify_code = editBox.string;
    this.onTextChanged();
  }




}