import { BasicType, YtAvoid, YtButton, yTRequest, yTRouter, yTToast } from 'basic'
import { CodeInputType } from '../models'
import { LoginInput } from '../components/LoginInput'
import { Terms } from '../components/Terms'
import { OtherLoginMethods } from '../components/OtherLoginMethods'

// import { OtherLoginMethods } from '../views/OtherLoginMethods'


@Builder
function LoginBuilder() {
  NavDestination() {
    LoginPage()
  }
  .hideTitleBar(true)
}

@Component
struct LoginPage {
  @State isAgree: boolean = false
  @StorageProp(YtAvoid.safeTopKey) safeTop: number = 0
  @StorageProp(YtAvoid.safeBottomKey) safeBottom: number = 0
  @State phoneNumber: string = ''
  @State Captcha: string = ''
  inputPhoneNumberType: CodeInputType = {
    txt: '+86',
    placeHolder: '请输入手机号'
  }
  inputCaptchaType: CodeInputType = {
    txt: '验证码',
    placeHolder: '请输入验证码'
  }
  loginMethodArr: BasicType<undefined>[] = [
  // {
  //   src: $r('app.media.wechat'),
  //   txt: '微信登入',
  //   click: () => {
  //     //使用微信sdk实现微信登录
  //
  //   }
  // },
    {
      // src: $r('app.media.hua_wei'),
      text: '华为登录',
      click: () => {
        if (!this.isAgree) {
          yTToast.agreePrivacy({ text: '华为登录' })
          return
        }
        yTRequest.huaweiLogin()
      }
    }
  ]

  aboutToAppear(): void {

  }

  build() {
    Column() {
      Image($r('[basic].media.ic_back'))
        .width(24)
        .aspectRatio(1)
        .margin({ bottom: 66 })
        .onClick(() => {
          yTRouter.routerBack()
        })
      Text('使用电话号码访问')
        .fontSize($r('[basic].float.page_text_font_size_10'))
        .margin({ bottom: 39 })
        .fontColor(Color.Black)

      LoginInput({ item: this.inputPhoneNumberType, inputData: this.phoneNumber, needCode: false })
      LoginInput({ item: this.inputCaptchaType, inputData: this.Captcha, phoneNumber: this.phoneNumber })


      Terms({ isAgree: this.isAgree, mg: 13 })
        .margin({ bottom: 74 })

      YtButton({
        btContent: '登录', click: () => {
          if (!this.isAgree) {
            AppStorage.setOrCreate<Record<string, string>>('captchaLogin',
              {
                'phonenumber': this.phoneNumber,
                'captcha': this.Captcha
              })
            yTToast.agreePrivacy({ text: '验证码登录' })
            return
          }
          yTRequest.phonenumberLogin({
            'phonenumber': this.phoneNumber,
            'captcha': this.Captcha
          })
        }
      })
        .margin({ bottom: 81 })


      // LoginButton('登录', () => {
      //   if (!this.isAgree) {
      //     PromptActionClass.openAgreePrivacy({})
      //     return
      //   }
      //   const code = AppStorage.get<CodeType>('smsCode')
      //   const askCodeNum: AskCodeNum = {
      //     phonenumber: this.phoneNumber,
      //     smsCode: this.Captcha,
      //     uuid: code?.uuid
      //   }
      //
      //   yTRequest.post<TokenType, AskCodeNum>('/api/friendcase/member/phoneLogin', askCodeNum)
      //     .then(res => {
      //       AppStorage.setOrCreate(AppstorageKey.TOKEN, res.token)
      //       yTRequest.refreshUserInfo()
      //       yTRouter.routerBack()
      //       AppStorage.setOrCreate<string>(AppstorageKey.PHONE_NUMBER, this.phoneNumber)
      //       IBestToast.show('登录成功')
      //     })
      //     .catch((err: Error) => {
      //       YTLog.error(err)
      //
      //     })
      //
      // })

      OtherLoginMethods({ loginMethodArr: this.loginMethodArr })
    }
    .backgroundColor(Color.White)
    .padding({
      top: 10 + this.safeTop,
      left: 16,
      right: 16,
      bottom: this.safeBottom
    })
    .alignItems(HorizontalAlign.Start)
    .height('100%')
  }
}