import { getEmailCode, emailType, resetPassword } from '../api/user'
import { formType } from '../api/userType'
import { promptAction, router } from '@kit.ArkUI'
import { AxiosResponse } from '@ohos/axios'
import LoadingDialog from '../dialog/LoadingDialog'
import { ValidateInputHandle } from '../utils/validateInputHandle'
import NavHeader from '../components/NavHeader'
// xxx.ets
@Styles function itemStyle () {
  .width('90%')
  .height(621)
  .margin({ top: 48, left: 12 })
  .borderRadius(24).padding(10)
  .backgroundColor(Color.White)
}

@Extend(Text) function itemTextStyle () {
  .fontColor('#182431')
  .fontSize(36)
  .fontWeight(500)
  .opacity(0.4)
  .margin({ top: 82, bottom: 40 })
}

@Entry
@Component
struct UpdatePassword {
  loadingController: CustomDialogController = new CustomDialogController({
    builder: LoadingDialog(),
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    alignment: DialogAlignment.Center,
    autoCancel: false
  })

  @State currentIndex: number = 0
  @State firstState: ItemState = ItemState.Skip
  @State secondState: ItemState = ItemState.Normal

  @State updateForm: formType = {
    password: '',
    againPassword: '',
    code: '',
    email: '',
    type: 0
  }
  @State returnCode: string = ''
  build() {
    Column(){
      NavHeader({title: '重置密码'})
      Stepper({
        index: this.currentIndex
      }) {
        // 第一个步骤页
        StepperItem() {
          Column() {
            Text('身份验证')
              .itemTextStyle()
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('邮箱')
              }.width(90)
              TextInput({placeholder: '请输入邮箱', text: $$this.updateForm.email})
                .backgroundColor('#fff').layoutWeight(1).type(InputType.Email)
                .showError(ValidateInputHandle(this.updateForm.email, 'email') ? '' : '请正确输入邮箱')
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('验证码')
              }.width(90)
              Row(){
                TextInput({placeholder: '请输入验证码', text: $$this.updateForm.code})
                  .showError(this.updateForm.code == this.returnCode ? '' : '验证码不正确')
                  .backgroundColor('#fff').layoutWeight(1).onChange((value) => {
                  if(value == this.returnCode){
                    this.firstState = ItemState.Normal
                  }
                })
                Text('获取验证码').fontSize(12).backgroundColor('#1890ff').borderRadius(5)
                  .padding({top: 4, bottom: 4, left: 10, right: 10}).fontColor('#fff')
                  .onClick(async () => {
                    if(this.updateForm.email == ''){
                      return promptAction.showToast({message: '请输入邮箱'})
                    }
                    this.loadingController.open()
                    const res: AxiosResponse<emailType> = await getEmailCode(this.updateForm.email)
                    this.returnCode = res.data.data
                    this.loadingController.close()
                    promptAction.showToast({
                      message: '已发送至邮箱，请查收'
                    })
                  })
              }.layoutWeight(1)
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
          }.itemStyle()
        }
        .nextLabel('下一步')
        .status(this.firstState)
        // 第二个步骤页
        StepperItem() {
          Column() {
            Text('重置密码')
              .itemTextStyle()
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('新密码')
              }.width(90)
              TextInput({placeholder: '请输入新密码', text: $$this.updateForm.password})
                .backgroundColor('#fff').layoutWeight(1)
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('确认密码')
              }.width(90)
              Row(){
                TextInput({placeholder: '请确认密码', text: $$this.updateForm.againPassword})
                  .backgroundColor('#fff').layoutWeight(1)
              }.layoutWeight(1)
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
          }.itemStyle()
        }
        .nextLabel('完成')
        .prevLabel('Previous')
        .status(this.secondState)
      }
      .layoutWeight(1)
      .onFinish( async() => {
        if(this.updateForm.againPassword !== this.updateForm.password) {
          return promptAction.showToast({message: '两次密码输入不一致'})
        }
        // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
        await resetPassword(this.updateForm)
        promptAction.showToast({message: '重置成功'})
        router.replaceUrl({
          url: 'pages/Login'
        })
      })
    }.backgroundColor('#F1F3F5')
  }
}