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

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

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

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

  @property(Label)
  private psd_label: Label = null;
  private _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.phone.node.on(EditBox.EventType.TEXT_CHANGED, this.onPhoneTextChanged, 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 { isGuest } = AppKernel.stores.mainStore.userInfo;
    const hasPsd = isGuest ? false : true;
    this.psd_label.string = hasPsd ? 'Current Password' : 'Set Password';
    this.psd.placeholder = hasPsd ? 'Current Password' : 'Set Password';

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

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

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

    const res = await AppKernel.stores.mainStore.reqBindPhoneConfirm({
      account: phone,
      password: pwd,
      code: code
    });
    if (res) {
      await AppKernel.ui.close(UIViewID.BindPhone);
      AppKernel.ui.toast("Bind success");
    }

  }

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

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

}