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('ChangeEmail')
export class ChangeEmail extends UIPopup {
  readonly viewId = UIViewID.ChangeEmail;

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

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

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

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

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

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

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

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

  @property(Label)
  private cur_email: Label = null;

  private _cur_email_code: string = '';
  private _new_email: string = '';
  private _psd: string = '';
  private _verify_code: string = '';

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

    this.cur_email_code.node.on(EditBox.EventType.TEXT_CHANGED, this.onCurEmailCodeTextChanged, this);
    this.new_email.node.on(EditBox.EventType.TEXT_CHANGED, this.onNewEmailTextChanged, this);
    this.psd.node.on(EditBox.EventType.TEXT_CHANGED, this.onPsdTextChanged, this);
    this.verify_code.node.on(EditBox.EventType.TEXT_CHANGED, this.onVerifyCodeTextChanged, this);

    const { Email } = AppKernel.stores.mainStore.userInfo;
    this.cur_email.string = "Current Email:" + Email;

  }

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

  private async onBtnConfirmClick() {
    const old_code = this.cur_email_code.string;
    const email = this.new_email.string;
    const pwd = this.psd.string;
    const new_code = this.verify_code.string;
    const isReady = !!old_code && !!email && !!pwd && !!new_code;
    if (!isReady) return;

    const res = await AppKernel.stores.mailStore.reqChangeEmailConfirm({
      account: email,
      old_code,
      new_code,
      password: pwd
    });
    if (res) {
      await AppKernel.ui.close(UIViewID.ChangeEmail);
      AppKernel.ui.toast("Change success");
    }
  }

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

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

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

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

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