import { Logger, EmitterEventId, EmitterUtils, DateTimeUtils,CustomToast, StringUtils, NetworkUtil,
  BreakpointSystem  } from 'wdKit'
import router from '@ohos.router'
import { LoginViewModel } from './LoginViewModel'
import { LoginInputComponent } from './LoginInputComponent'
import { WDRouterPage } from 'wdRouter/src/main/ets/router/WDRouterPage';
import { WDRouterRule } from 'wdRouter/src/main/ets/router/WDRouterRule';
import {InterestsHobbiesModel} from '../../bean/InterestsHobbiesModel'
import { TrackingPageBrowse, TrackConstants, TrackingButton, ParamType, Tracking } from 'wdTracking/Index'
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
import { common } from '@kit.AbilityKit'
import { Params } from 'wdBean'

@Extend(Row)
function otherStyle() {
  .backgroundImageSize(ImageSize.Cover)
  .layoutWeight(1)
  .height("100%")
  .justifyContent(FlexAlign.Center)
  .alignItems(VerticalAlign.Center)
}

function isEmpty(obj: undefined | string | null): boolean {
  return (obj == undefined || obj == null || obj == '');
}

const TAG = "LoginPage"

@Entry
@Component
struct LoginPage {
  @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
  @State codeBtnState: boolean = false
  @State timeCount: number = 60
  phoneController: TextInputController = new TextInputController()
  codeSendText = ""
  @State @Watch('onCodeSend') isCodeSend: boolean = false //验证码是否发送
  @State phoneContent: string = "" //手机号
  @State codeContent: string = "" //验证码
  @State protocolState: boolean = false //协议勾选状态
  @State accountContent: string = '' //账号
  @State passwordContent: string = ''
  @State isSubmit: boolean = false
  @State checkCodePage: boolean = true //判断是否是验证码页面 默认验证码登录
  @State passwordSwitch: boolean = true //密码显示
  lastTime: number = 0
  @State codeStateSuccess:boolean=false
  @State toastText:string = ""
  @State isPrivacyMode: boolean = true;
  dialogToast: CustomDialogController = new CustomDialogController({
    builder: CustomToast({
      msg: this.toastText,
    }),
    autoCancel: false,
    alignment: DialogAlignment.Center,
    customStyle: true,
    maskColor:"#00000000"
  })
  pageShowTime:number = 0;
  pageHideTime:number = 0;

  loginViewModel = new LoginViewModel()
  @State isProtocol:boolean=false
  @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
  private breakpointSystem = new BreakpointSystem();
  @State percent:number = 1

  currentChanged(){
    if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
      this.percent = 0.7
    }else {
      this.percent = 1
    }
  }
  onCodeSend() {
    Logger.debug(TAG, "isCodeSend:" + this.isCodeSend + "")
    if (this.isCodeSend) {
      TrackingButton.click("loginPageGetVerificationCode",TrackConstants.PageName.Phone_Login_Page,TrackConstants.PageName.Phone_Login_Page)
      this.sendVerifyCode()
    }
  }

  aboutToAppear() {
    Logger.debug(TAG, "aboutToAppear:" + this.isCodeSend + "")
    this.breakpointSystem.register();
    this.currentChanged()
  }

  disableScreenCapture(){
    let windowClass: window.Window|undefined = undefined;
    let  context = getContext(this) as common.UIAbilityContext
    try {
      window.getLastWindow(context, (err, data) => {
        if (err.code) {
          return
        }
        windowClass = data
          windowClass.setWindowPrivacyMode(this.isPrivacyMode, (err: BusinessError) => {
            const errCode: number = err.code;
            if (errCode) {
              console.error('Failed to set the window to privacy mode. Cause:' + JSON.stringify(err));
              return;
            }
            console.info('Succeeded in setting the window to privacy mode.');
          });
      })
    } catch (exception) {
      console.error('Failed to set the window to privacy mode. Cause:' + JSON.stringify(exception));
    }
  }

  aboutToDisappear(): void {
    this.breakpointSystem.unregister();
  }

  onPageShow() {
    Logger.debug(TAG, "onPageShow:" + this.isCodeSend + " ")
    this.pageShowTime = DateTimeUtils.getTimeStamp()
    this.isPrivacyMode = true
    this.disableScreenCapture()
  }


  onPageHide(): void {
    ///关闭禁止截图
    this.isPrivacyMode = false
    this.disableScreenCapture()

    this.loginPageBrowse()
  }

  loginPageBrowse(){
    this.pageHideTime = DateTimeUtils.getTimeStamp()
    let duration = 0
    duration = Math.floor((this.pageHideTime - this.pageShowTime)/1000)

    if(this.checkCodePage){
      TrackingPageBrowse.trackCommonPageExposureEnd(TrackConstants.PageName.Phone_Login_Page,TrackConstants.PageName.Phone_Login_Page,duration)
    }else{
      TrackingPageBrowse.trackCommonPageExposureEnd(TrackConstants.PageName.Login_Page,TrackConstants.PageName.Login_Page,duration)
    }
  }

  build() {
    Column(){
      Stack() {
      RelativeContainer() {

        //注册内容
        Column() {
          Image($r("app.media.login_logo"))
            .width(155)
            .height(66)
            .margin({ top: 78 + px2vp(this.topSafeHeight) })
            .align(Alignment.Center)

          LoginInputComponent({
            phoneContent: $phoneContent,
            codeContent: $codeContent,
            isSubmit: $isSubmit,
            isCodeSend: $isCodeSend,
            codeStateSuccess:$codeStateSuccess,
            protocolState:this.protocolState,
            isNeedProtocol:true
          }).visibility(this.checkCodePage ? Visibility.Visible : Visibility.None)
          this.addPassword()

          Row() {
            Image(this.protocolState ? $r('app.media.login_checkbox_select') : $r('app.media.login_checkbox_unselected'))
              .width(15)
              .height(15)
              .onClick(() => {
                this.protocolState = !this.protocolState
              })

            Text() {
              Span("我已阅读并同意").fontColor("#999999").fontSize(12)
              Span("《用户协议》").fontColor("#ED2800").fontSize(12).onClick(() => {
                if(this.checkCodePage){
                  TrackingButton.click("loginPageUserAgreement",TrackConstants.PageName.Phone_Login_Page,TrackConstants.PageName.Phone_Login_Page)
                }else{
                  TrackingButton.click("loginPageUserAgreement",TrackConstants.PageName.Login_Page,TrackConstants.PageName.Login_Page)
                }
                let bean = { contentID: "1", pageID: "" } as Params
                WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
              })
              Span("及").fontColor("#999999").fontSize(12)
              Span("《隐私政策》").fontColor("#ED2800").fontSize(12).onClick(() => {
                if(this.checkCodePage){
                  TrackingButton.click("loginPagePrivacyAgreement",TrackConstants.PageName.Phone_Login_Page,TrackConstants.PageName.Phone_Login_Page)
                }else{
                  TrackingButton.click("loginPagePrivacyAgreement",TrackConstants.PageName.Login_Page,TrackConstants.PageName.Login_Page)
                }
                let bean = { contentID: "2", pageID: "" } as Params
                WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
              })
            }
          }.margin({ top: 48 }).alignItems(VerticalAlign.Center)

          Row() {
            Text("登录")
              .borderRadius(4)
              .fontColor("#FFFFFF")
              .fontSize(`${this.calcHeight(31)}lpx`)
              .fontWeight(400)
              .margin({ top: `${this.calcHeight(20)}` })
              .lineHeight(`${this.calcHeight(50)}lpx`)
              .height(44)
              .textAlign(TextAlign.Center)
              .width("100%")
              .backgroundColor("#ED2800")
              .opacity(this.isSubmit ? 1: 0.6)
              .onClick(() => {
                if (!this.isSubmit) {
                  return
                }
                let currentTime = DateTimeUtils.getTimeStamp()
                if (currentTime - this.lastTime > 500) {
                  this.lastTime = currentTime
                  this.loginSubmit()
                }


              })
          }.padding({ left: 25, right: 25 }).width('100%')


          if (!this.checkCodePage) {
            Text('忘记密码')
              .fontColor('#666666')
              .fontSize(`${this.calcHeight(31)}lpx`)
              .fontWeight(400)
              .lineHeight(`${this.calcHeight(38)}lpx`)
              .margin({ top: 16 })
              .onClick(() => {
                TrackingButton.click("loginPageForgotPassword",TrackConstants.PageName.Login_Page,TrackConstants.PageName.Login_Page)
                if(StringUtils.isNotEmpty(this.accountContent) && StringUtils.photoMatch(this.accountContent)){
                  let pageType = { 'phone': Number(this.accountContent),'isForgetPassword':1 } as Record<string, number>;
                  WDRouterRule.jumpWithPage(WDRouterPage.forgetPasswordPage, pageType)
                }else{
                  let pageType = {'isForgetPassword':1 } as Record<string, number>;
                  WDRouterRule.jumpWithPage(WDRouterPage.forgetPasswordPage,pageType)
                }
              })
          }

        }.width("100%")
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
        }).id("register")

        //其他登录方式
        Column() {
          this.addOtherLogin()
        }.width('100%')
        .alignRules({
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
        }).id("other")

        //关闭按钮
        Image($r('app.media.login_closed'))
          .width(24)
          .height(24)
          .margin({ top:px2vp(this.topSafeHeight), right: 15 })
          .alignRules({
            top: { anchor: "__container__", align: VerticalAlign.Top },
            right: { anchor: "__container__", align: HorizontalAlign.End }
          })
          .onClick(() => {
            router.back()
          })
          .id('id_close')

      }.width('100%').height('100%')

      ProtocolComponent({
        cancelMethod: (): void => this.cancelProtocol(),
        agreeMethod: (): void => this.agreeProtocol(),
        percent:$percent
      })
        .visibility(this.isProtocol ? Visibility.Visible : Visibility.None)

    }.width('100%')
      .height("100%")
    .backgroundColor(Color.White)
    }.width("100%")
    .height("100%")
    // .padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})

  }

  @Builder
  addPassword() {
    Column() {
      TextInput({ text: this.accountContent,placeholder: "请输入账号", controller: this.phoneController })
        .fontSize(16)
        .placeholderColor("#CCCCCC")
        .height(48)
        .backgroundColor("#F5F5F5")
        .borderRadius(4)
        .type(InputType.Normal)
        .onChange((content) => {
          this.accountContent = content
          this.isSubmit = (this.accountContent.length >= 1 && this.passwordContent.length >= 6)
        })

      RelativeContainer() {
          this.addPasswordInputLayout()

        Image(this.passwordSwitch ? $r('app.media.login_password_off') : $r('app.media.login_password_on'))
          .onClick(() => {
            this.passwordSwitch = !this.passwordSwitch
          })
          .width(24)
          .height(24)
          .alignRules({
            right: { anchor: "__container__", align: HorizontalAlign.End },
            center: { anchor: '__container__', align: VerticalAlign.Center }
          })
          .margin({ right: 12 })
          .id("password_icon")

      }.margin({ top: 12 })
      .height(48)
      .width('100%')
    }.padding({ left: 25, right: 25 }).width('100%').margin({ top: 36 })
    .visibility(this.checkCodePage ? Visibility.None : Visibility.Visible)
    .backgroundColor(Color.White)

  }

  @Builder
  addPasswordInputLayout() {
    TextInput({ placeholder: "请输入密码", text: this.passwordContent })
      .placeholderColor("#CCCCCC")
      .layoutWeight(1)
      .fontSize(16)
      .height(48)
      .fontColor("#222222")
      .backgroundColor("#F5F5F5")
      .type(this.passwordSwitch ? InputType.Password : InputType.Normal)
      .showPasswordIcon(false)
      .borderRadius({ topLeft: 4, bottomLeft: 4 })
      .alignRules({
        // top:{anchor:"__container__",align:VerticalAlign.Top} ,
        left: { anchor: "__container__", align: HorizontalAlign.Start },

      })
      .onChange((value) => {
        // Logger.debug(TAG, "onChange" + value + "/" + this.passwordContent)
        this.passwordContent = value
        this.isSubmit = (this.accountContent.length >= 1 && this.passwordContent.length >= 6)
      })
      .id("password")
  }

  @Builder
  addOtherLogin() {
    Column() {
      Row() {
        Divider().layoutWeight(1).margin({ left: 25 })
        Text('其他登录方式').margin({ left: 16, right: 16 }).fontSize(14).fontColor("#666666")
        Divider().layoutWeight(1).margin({ right: 25 })
      }.width('100%')

      Row() {
        Row() {
          Image(this.checkCodePage ? $r('app.media.login_qt') : $r('app.media.login_other_password'))
            .size({ width: `${this.calcHeight(35)}lpx`, height: `${this.calcHeight(35)}lpx` })
            .margin({right:`${this.calcHeight(8)}lpx`})
            .height(`${this.calcHeight(38)}lpx`)
            .width(`${this.calcHeight(38)}lpx`)
          Text(this.checkCodePage ? "密码登录" : "手机号登录")
            .fontWeight(400)
            .fontColor("#3D3D3D")
            .fontSize(`${this.calcHeight(23)}lpx`)
            .lineHeight(`${this.calcHeight(38)}lpx`)
        }
        .onClick(() => {
          this.loginPageBrowse()

          if(this.checkCodePage){
            trackTypeClick(0,TrackConstants.PageName.Phone_Login_Page)
          }else{
            trackTypeClick(6,TrackConstants.PageName.Login_Page)
          }

          this.updateAccount()
          this.checkCodePage = !this.checkCodePage
          this.passwordSwitch = true
          this.isSubmit = false
          this.pageShowTime = DateTimeUtils.getTimeStamp()
        }).width('100%')
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.Center)

      }.height(36)
      .width('100%')
      .padding({ left: 25, right: 25 })
      .margin({ top: `${this.calcHeight(46)}lpx` })
    }
    .width('100%')
    .margin({ bottom: 40 })
  }

  updateAccount(){
    if(this.checkCodePage){
      //验证码切换 密码
      if(StringUtils.photoMatch(this.phoneContent)){
        this.accountContent = this.phoneContent
      }
    }else{
      //密码切换 验证码
      if(StringUtils.photoMatch(this.accountContent)){
        this.phoneContent = this.accountContent
      }
    }
  }

  //发送验证码
  sendVerifyCode() {
    this.loginViewModel.sendVerifyCode(this.phoneContent).then((verifyCode) => {
      this.showToastTip("已发送")
      Logger.debug(TAG, "sendVerifyCode: " + verifyCode)
      this.codeStateSuccess=true
      this.isCodeSend=false
    }).catch((message:string)=>{
      let netStatus = NetworkUtil.isNetConnected()
      if (netStatus) {
        this.showToastTip(message)
      } else {
        this.showToastTip("验证码获取失败，请重新尝试")
      }
      this.codeStateSuccess=false
      this.isCodeSend=false
      Logger.debug(TAG, "sendVerifyCode: " + message)
    })
  }

  requestLogin() {
    Logger.debug('LoginViewModel', "requestLogin")
    if (this.checkCodePage) {
      TrackingButton.click("loginPageLoginButton",TrackConstants.PageName.Phone_Login_Page,TrackConstants.PageName.Phone_Login_Page)
      this.loginViewModel.appLogin(this.phoneContent, 2, this.codeContent).then((data) => {
        Logger.debug(TAG, "requestLogin: " + data.jwtToken)
        this.showToastTip('登录成功')
        ///同步兴趣tag
        let interestsModel = new InterestsHobbiesModel()
        interestsModel.updateInterests()
        this.queryUserDetail()
        EmitterUtils.sendEvent(EmitterEventId.PEOPLE_SHIP_ATTENTION)
      }).catch((error:string)=>{
        this.showToastTip(error)
      })
    } else {
      TrackingButton.click("loginPageLoginButton",TrackConstants.PageName.Login_Page,TrackConstants.PageName.Login_Page)
      this.loginViewModel.appLoginByPassword(this.accountContent, 0, this.passwordContent, "").then((data) => {
        Logger.debug(TAG, "requestLogin: " + data.jwtToken)
        this.showToastTip('登录成功')

        ///同步兴趣tag
        let interestsModel = new InterestsHobbiesModel()
        interestsModel.updateInterests()
        this.queryUserDetail()
        EmitterUtils.sendEvent(EmitterEventId.PEOPLE_SHIP_ATTENTION)

        // router.back({
        //   params: { userName: data.userName,
        //     userId:data.id},
        //   url: `${WDRouterPage.getBundleInfo()}`
        // })
      }).catch((value: string) => {
        this.showToastTip(value)
      })
    }

  }

  showToastTip(msg:string){
    this.toastText = msg
    this.dialogToast.open()
  }

  queryUserDetail(){
    this.loginViewModel.queryUserDetail().then(()=>{
      router.back()
    }).catch(()=>{
      router.back()
    })
  }

  //登录
  loginSubmit() {
    Logger.debug(TAG, "loginSubmit " + this.checkCodePage)
    if (this.checkCodePage) {
      if (isEmpty(this.phoneContent)) {
        Logger.debug(TAG, "手机号为空")
        return
      }
      if (isEmpty(this.codeContent)) {
        Logger.debug(TAG, "验证码为空")
        return
      }

    } else {
      if (isEmpty(this.accountContent)) {
        Logger.debug(TAG, "账号为空")
        return
      }
      if (isEmpty(this.passwordContent)) {
        Logger.debug(TAG, "密码为空")
        return
      }
    }
    if (this.protocolState) {
      this.requestLogin()
    } else {
      // this.dialogController.open()
      this.isProtocol=true
    }

  }

  agreeProtocol(): void {
    this.isProtocol = false
    this.protocolState = true
    this.requestLogin()
  }

  cancelProtocol(): void {
    this.isProtocol = false
  }

  pageTransition() {
    // 为目标页面时，进入：从右边侧滑入，退出：是右侧划出；跳转别的页面：左侧划出，返回：左侧划入。
    PageTransitionEnter({ type: RouteType.Push, duration: 300 })
      .slide(SlideEffect.Right)
    PageTransitionEnter({ type: RouteType.Pop, duration: 300 })
      .slide(SlideEffect.Left)
    PageTransitionExit({ type: RouteType.Push, duration: 300 })
      .slide(SlideEffect.Left)
    PageTransitionExit({ type: RouteType.Pop, duration: 300 })
      .slide(SlideEffect.Right)
  }

  calcHeight(value:number): number{
    return value * this.percent
  }
}


@Component
struct ProtocolComponent {
  cancelMethod?: () => void
  agreeMethod?: () => void
  @Link percent:number

  build() {
    Stack() {
      Column() {
        Text("温馨提示")
          .fontColor("#222222")
          .fontSize(`${this.calcHeight(35)}lpx`)
          .lineHeight(`${this.calcHeight(50)}lpx`)
          .width("100%")
          .fontWeight(500)
          .textAlign(TextAlign.Center)
          .margin({ top: `${this.calcHeight(38)}lpx` })
        Text() {
          Span("为保障您的合法权益，请阅读并同意")
            .fontSize(`${this.calcHeight(27)}lpx`)
            .lineHeight(`${this.calcHeight(42)}lpx`)
            .fontWeight(400)
            .fontColor("#666666")

          Span("《用户协议》")
            .fontSize(`${this.calcHeight(27)}lpx`)
            .lineHeight(`${this.calcHeight(42)}lpx`)
            .fontWeight(400)
            .fontColor("#ED2800")
            .onClick(() => {
            let bean = { contentID: "1", pageID: "" } as Params
            WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
          })
          Span("及").fontSize(`${this.calcHeight(27)}lpx`)
            .lineHeight(`${this.calcHeight(42)}lpx`)
            .fontWeight(400)
            .fontColor("#666666")
          Span("《隐私政策》")
            .fontSize(`${this.calcHeight(27)}lpx`)
            .lineHeight(`${this.calcHeight(42)}lpx`)
            .fontWeight(400)
            .fontColor("#ED2800")
            .onClick(() => {
            let bean = { contentID: "2", pageID: "" } as Params
            WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
          })
          Span("后进行登录")
            .fontSize(`${this.calcHeight(27)}lpx`)
            .lineHeight(`${this.calcHeight(42)}lpx`)
            .fontWeight(400)
            .fontColor("#666666")
        }.margin({ top: `${this.calcHeight(23)}lpx`, left: `${this.calcHeight(31)}lpx`, right: `${this.calcHeight(31)}lpx` })
        .wordBreak(WordBreak.BREAK_ALL)
        .textAlign(TextAlign.Start)

        Divider().color("#f5f5f5").width("100%").margin({ top: `${this.calcHeight(27)}lpx` }).height(`${this.calcHeight(1)}lpx`).strokeWidth(`${this.calcHeight(1)}lpx`)
        Row() {
          Text('放弃登录')
            .fontSize(`${this.calcHeight(31)}lpx`)
            .fontWeight(500)
            .lineHeight(`${this.calcHeight(42)}lpx`)
            .fontColor("#999999")
            .layoutWeight(1)
            .textAlign(TextAlign.Center)
            .onClick(() => {
              if (this.cancelMethod) {
                this.cancelMethod()
              }
            })
            .height('100%')

          Divider()
            .width(`${this.calcHeight(1)}lpx`)
            .strokeWidth(`${this.calcHeight(1)}lpx`)
            .vertical(true)
            .height('100%')
            .color("#F5F5F5")


          Text('同意并登录')
            .fontSize(`${this.calcHeight(31)}lpx`)
            .fontWeight(500)
            .lineHeight(`${this.calcHeight(42)}lpx`)
            .fontColor("#ED2800")
            .layoutWeight(1)
            .textAlign(TextAlign.Center)
            .border({
              width: { left: 1 },
              color: "#F5F5F5",
              style: { left: BorderStyle.Solid }
            })
            .onClick(() => {
              if (this.agreeMethod) {
                this.agreeMethod()
              }
            })
            .height('100%')
        }.layoutWeight(1)
        .justifyContent(FlexAlign.Center)
      }
      .backgroundColor(Color.White)
      .borderRadius(`${this.calcHeight(12)}lpx`)
      .width(`${this.calcHeight(528)}lpx`)
      .height(`${this.calcHeight(309)}lpx`)

    }.width('100%')
    .height('100%')
    .backgroundColor('#66000000')

  }

  calcHeight(value:number): number{
    return value * this.percent
  }
}

function trackTypeClick(typeValue: number,pageId: string){
  let params: ParamType = {}
  params["loginType"] = typeValue
  params["pageName"] = pageId
  params["pageId"] = pageId

  Tracking.event("login_type_click", params)
}