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

  @property(SelectBox)
  private select_country: SelectBox = null;

  @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_phone_code: EditBox = null;

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

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

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

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

  private _cur_phone_code: string = '';
  private _new_phone: 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_phone_code.node.on(EditBox.EventType.TEXT_CHANGED, this.onCurPhoneCodeTextChanged, this);
    this.new_phone.node.on(EditBox.EventType.TEXT_CHANGED, this.onNewPhoneTextChanged, 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 { Phone } = AppKernel.stores.mainStore.userInfo;
    this.cur_phone.string = "Current Phone:" + Phone;


    this.select_country.initSelectItems(["+1 United States"], { defaultIndex: 0 });
  }

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

  private async onBtnConfirmClick() {
    const old_code = this.cur_phone_code.string;
    const phone = this.new_phone.string;
    const pwd = this.psd.string;
    const new_code = this.verify_code.string;
    const isReady = !!old_code && !!phone && !!pwd && !!new_code;
    if (!isReady) return;

    const res = await AppKernel.stores.mainStore.reqChangePhoneConfirm({
      oldCode: old_code,
      newPhone: phone,
      newCode: new_code,
      password: pwd
    });
    if (res) {
      await AppKernel.ui.close(UIViewID.ChangePhone);
      AppKernel.ui.toast("Change success");
    }
  }

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

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

  private onNewPhoneTextChanged(editBox: EditBox) {
    console.log('onNewPhoneTextChanged', editBox.string);
    this._new_phone = 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();
  }
}