import { BasicType, YTButton, } from 'basic'
import { LoginCollect } from 'basic/src/main/ets/models/LoginCollect'
import { LoginInput } from '../components/LoginInput'
import { OtherLoginMethods } from '../components/OtherLoginMethods'
import { Terms } from '../components/Terms'
import { CodeInputType } from '../models'


@Component
export struct LoginView {
  @State private loginCollect: LoginCollect = new LoginCollect('login')
  @State private isPassword: boolean = false
  private inputCaptchaType: CodeInputType = {
    txt: '验证码',
    placeHolder: '请输入验证码'
  }
  private inputPasswordType: CodeInputType = {
    txt: '密码',
    placeHolder: '请输入密码'
  }
  private loginMethodArr: BasicType<undefined>[] = [
  // {
  //   src: $r('app.media.wechat'),
  //   txt: '微信登入',
  //   click: () => {
  //     //使用微信sdk实现微信登录
  //
  //   }
  // },
    {
      src: $r('app.media.hua_wei'),
      text: '华为登录',
      click: () => {
        this.loginCollect.executeLogin("harmony")
      }
    }
  ]
  private inputPhoneNumberType: CodeInputType = {
    txt: '+86',
    placeHolder: '请输入手机号'
  }
  forgetPassClick: () => void = () => {
  }

  build() {
    Column() {
      LoginInput({
        item: this.inputPhoneNumberType,
        inputData: this.loginCollect.phonenumber,
        isPassword: false,
        needCode: false,
        inputChange: (value: string) => {
          this.loginCollect.phonenumber = value
        }
      })
      if (this.isPassword) {
        LoginInput({
          item: this.inputPasswordType,
          inputData: this.loginCollect.password,
          isPassword: true,
          needCode: false,
          inputChange: (value: string) => {
            this.loginCollect.password = value
          }
        })
      } else {
        LoginInput({
          item: this.inputCaptchaType,
          inputData: this.loginCollect.smsCode,
          loginCollect: this.loginCollect,
          isAgree: this.loginCollect.isAgreePrivacy,
          inputChange: (value: string) => {
            this.loginCollect.smsCode = value
          },
          marginBottom: 19
        })
      }

      Terms({
        isAgree: this.loginCollect.isAgreePrivacy, mg: 13, onAgreeChange: () => {
          this.loginCollect.isAgreePrivacy = !this.loginCollect.isAgreePrivacy
        }
      })

      Row() {
        if (!this.isPassword) {
          Text('密码登录')
            .fontColor($r('[basic].color.main_ac_color_dark'))
            .fontSize(12)
            .fontWeight(700)
            .onClick(() => {
              this.isPassword = true
            })
          Blank()
        } else {
          Text('验证码登录')
            .fontColor($r('[basic].color.main_ac_color_dark'))
            .fontWeight(700)
            .fontSize(12)
            .onClick(() => {
              this.isPassword = false
            })
          Blank()
          Text('忘记密码?')
            .fontColor($r('[basic].color.main_ac_color_dark'))
            .fontSize(12)
            .fontWeight(700)
            .onClick(() => {
              this.forgetPassClick?.()
            })
        }
      }
      .width('100%')
      .margin({ top: 20, bottom: 20 })


      YTButton({
        btContent: '登录',
        click: () => {
          this.loginCollect.executeLogin("common")
        }
      })


      Text('未注册的手机号码登陆后将自动注册')
        .fontColor($r('[basic].color.main_ac_color_dark'))
        .fontSize(12)
        .margin({ top: 16, bottom: 56 })
        .alignSelf(ItemAlign.Start)

      OtherLoginMethods({ loginMethodArr: this.loginMethodArr })
    }
    .width('100%')
    .height('100%')
  }
}