import { CustomTitleUI } from '../reusable/CustomTitleUI';
import { EditListInfo, editModel, editModelParams, WDEditDataModelType } from '../../model/EditInfoModel';
import EditInfoViewModel from '../../viewmodel/EditInfoViewModel';
import { WDRouterPage, WDRouterRule } from 'wdRouter';
import {AreaPickerDialog} from '../view/areaPickerDialog/AreaPickerDialog'
import {EditUserInfoCustomDialog} from '../view/areaPickerDialog/EditUserInfoCustomDialog'
import {EditUserSexCustomDialog} from '../view/areaPickerDialog/EditUserSexCustomDialog'
import { AreaListModel } from '../../model/AreaListModel';
import router from '@ohos.router';
import TrackingPageBrowseUtils from '../../utils/TrackingPageBrowseUtils'
import { TrackConstants } from 'wdTracking/Index';
import { window } from '@kit.ArkUI';

@Entry
@Component
struct EditUserInfoPage {
  @State listData: EditListInfo[] = []
  @State  headerImg: string = ''
  @State dataSource: AreaListModel[] = []
  @State currentUserInfo: editModel = new editModel()
  @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0

  dialogController: CustomDialogController = new CustomDialogController({
    builder: AreaPickerDialog({dataSource:this.dataSource,
      confirmCallback:(province:string,city:string,county:string,address:string)=>{
        this.currentUserInfo.userExtend.province = province;
        this.currentUserInfo.userExtend.city = city;
        this.currentUserInfo.userExtend.county = county;
        this.currentUserInfo.userExtend.address = address;
        this.currentUserInfo.editDataType = WDEditDataModelType.WDEditDataModelType_region
        this.updateEditModel()
      }
    }),
    alignment: DialogAlignment.Bottom,
    customStyle: true,
    closeAnimation:{duration:0}
  })

  dateDialogController: CustomDialogController = new CustomDialogController({
    builder: EditUserInfoCustomDialog({
      confirmCallback:(selectDate:Date)=>{
        let mon = selectDate.getUTCMonth() as number + 1
        let monStr = mon < 10? '0'+mon.toString():mon.toString();
        let dayStr = selectDate.getUTCDate() as number < 10? '0'+selectDate.getUTCDate():selectDate.getUTCDate();
        this.currentUserInfo.userExtend.birthday = selectDate.getUTCFullYear()+'-'+monStr+'-'+dayStr;
        this.currentUserInfo.editDataType = WDEditDataModelType.WDEditDataModelType_birthday
        this.updateEditModel()
      }
    }),
    alignment: DialogAlignment.Bottom,
    customStyle: true,
    closeAnimation:{duration:0}
  })

  sexDialogController: CustomDialogController = new CustomDialogController({
    builder: EditUserSexCustomDialog({
      confirmCallback:(index)=>{
        this.currentUserInfo.userExtend.sex = index;
        this.currentUserInfo.editDataType = WDEditDataModelType.WDEditDataModelType_sex
        this.updateEditModel()
      }
    }),
    alignment: DialogAlignment.Bottom,
    customStyle: true,
    closeAnimation:{duration:0}
  })

  aboutToAppear() {
    this.getAccountOwnerInfo()
    this.getAreaList()
  }

  onPageShow(){
    this.updateUserNameAndIntroduction()
    TrackingPageBrowseUtils.TrackingPageBrowseExposureStart()
  }

  onPageHide(): void {
    TrackingPageBrowseUtils.TrackingPageBrowseExposureEnd(TrackConstants.PageName.Edit_Information,TrackConstants.PageName.Edit_Information)
  }

  build() {
    Row() {
      Column() {
        CustomTitleUI({titleName:'编辑资料'})

        Stack(){
          Image(this.headerImg)
            .alt($r('app.media.default_head'))
            .backgroundColor(Color.Gray)
            .width(84)
            .height(84)
            .borderRadius(42)


          if (this.headerImg.length === 0){
            Image('')
              .width('84')
              .height('84')
              .backgroundColor(Color.Gray)
              .opacity(0.7)
              .borderRadius(5)
              .borderRadius(42)

            Image($r('app.media.seletct_photo'))
              .width('30')
              .height('30')
          }
        }.margin({top:20,bottom:40})

        ///目前不支持头像上传，暂时屏蔽
        // Button('点击更换头像')
        //   .fontColor(Color.Gray)
        //   .fontSize(15)
        //   .backgroundColor(Color.White)
        //   .margin(20)

        List({}){
          ForEach(this.listData,(item:EditListInfo,index:number) =>{
            ListItem(){
              this.RouterItem(item,index+1)
            }
          }
          )
        }
        .layoutWeight(1)
        .alignListItem(ListItemAlign.Center)
        .width('100%')
      }
    }
    .width('100%')
    .height('100%')
    .padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
  }

  @Builder
  RouterItem(r:EditListInfo,i:Number){
    Column(){
      Row(){
        Text(r.title)
          .fontSize(15)
          .fontColor('#666666')
        Blank()

        Text(r.subTitle)
          .textOverflow({overflow:TextOverflow.Ellipsis})
          .maxLines(1)
          .fontSize(14)
          .fontColor(r.subTitle === '待完善'?'#cccccc':'#666666')
          .padding({right:10})
          .width('70%')
          .textAlign(TextAlign.End)

        Image($r('app.media.mine_user_edit'))
          .width('12')
          .height('12')
      }
      .alignItems(VerticalAlign.Center)
      .width('100%')
      .padding(16)

      Divider()
        .width('90%')
    }
    .height(60)
    .width('100%')
    .onClick(()=>{
      if (i === 1){
        // TODO 缺失特殊用户判断
        let params: editModelParams = {
          editContent: this.currentUserInfo.userName
        }
        WDRouterRule.jumpWithPage(WDRouterPage.editUserNikeNamePage,params)
      }else if (i === 2){
        let params: editModelParams = {
          editContent: this.currentUserInfo.userExtend.introduction
        }
        WDRouterRule.jumpWithPage(WDRouterPage.editUserIntroductionPage,params)
      }else if (i === 3){
        this.dialogController.open()
      } else if (i === 4) {
        this.dateDialogController.open()
      }else if(i === 5){
        this.sexDialogController.open()
      }
    })
  }

  updateUserNameAndIntroduction(){
    let  backParams:editModelParams =  router.getParams() as editModelParams;
    if (backParams) {
      let userName = backParams.userName as string ///昵称
      let introduction = backParams.introduction as string ///简介

      if (userName) {
        if (userName != this.currentUserInfo.userName) {
          // this.currentUserInfo.userName = userName;
          // this.currentUserInfo.editDataType = WDEditDataModelType.WDEditDataModelType_nickname
          // this.updateEditModel()
          this.getAccountOwnerInfo()
        }
      } else if (introduction){
        if (introduction != this.currentUserInfo.userExtend.introduction ) {
          // this.currentUserInfo.userExtend.introduction = introduction;
          // this.currentUserInfo.editDataType = WDEditDataModelType.WDEditDataModelType_intro
          // this.updateEditModel()
          this.getAccountOwnerInfo()
        }
      }
    }
  }

  updateEditModel(){
    // this.listData.push(...EditInfoViewModel.getEditListInfo(this.currentUserInfo))
    EditInfoViewModel.updateUserInfo(this.currentUserInfo).then(()=>{
      this.getAccountOwnerInfo()
    })
  }
  getAccountOwnerInfo(){
    EditInfoViewModel.queryAccountOwnerInfo(1,getContext(this)).then((editModel) => {
      this.listData = []
      if (editModel.userExtend.headPhotoUrl) {
        this.headerImg = editModel.userExtend.headPhotoUrl
      }
      this.currentUserInfo = editModel as editModel;
      this.listData.push(...EditInfoViewModel.getEditListInfo(editModel))
    });
  }
  getAreaList(){
    EditInfoViewModel.getAreaList(getContext(this)).then((value) =>{
      this.dataSource.push(...value)
    })
  }
}