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 {CustomDialogUI} from '../view/areaPickerDialog/CustomDialogUI'
import { AreaListManageModel, AreaListModel } from '../../model/AreaListModel';
import router from '@ohos.router';
import TrackingPageBrowseUtils from '../../utils/TrackingPageBrowseUtils'
import { TrackConstants } from 'wdTracking/Index';

import { SPHelper } from 'wdKit/Index';
import { SpConstants } from 'wdConstant/Index';
import { photoPickerUtils} from '../../utils/PhotoPickerUtils';
import { cameraPickerUtils } from '../../utils/CameraPickerUtils';

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

  userType:string = "1"

  @State firstSelect:number = 0
  @State secondSelect:number = 0
  @State thirdSelect:number = 0

  dialogController: CustomDialogController = new CustomDialogController({
    builder: AreaPickerDialog({dataSource:this.dataSource,firstSelect:this.firstSelect,secondSelect:this.secondSelect,thirdSelect:this.thirdSelect,
      confirmCallback:(province:AreaListManageModel,city:AreaListManageModel,county:AreaListManageModel,address:string)=>{
        this.currentUserInfo.userExtend.province = province.label;
        this.currentUserInfo.userExtend.city = city.label;
        this.currentUserInfo.userExtend.county = county.label;
        this.currentUserInfo.userExtend.address = address;

        this.currentUserInfo.userExtend.provinceCode = province.code;
        this.currentUserInfo.userExtend.cityCode = city.code;
        this.currentUserInfo.userExtend.districtCode = county.code;

        this.currentUserInfo.editDataType = WDEditDataModelType.WDEditDataModelType_region
        this.updateEditModel()
        // this.getAreaIndex()
      }
    }),
    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.toString().padStart(2,'0')
        let dayStr = selectDate.getUTCDate().toString().padStart(2,'0')
        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)=>{
        ///1男 2女
        this.currentUserInfo.userExtend.sex = index == 0?2:1;
        this.currentUserInfo.editDataType = WDEditDataModelType.WDEditDataModelType_sex
        this.updateEditModel()
      }
    }),
    alignment: DialogAlignment.Bottom,
    customStyle: true,
    closeAnimation:{duration:0}
  })

  photoDialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogUI({
      itemData:['相册','拍照'],
      confirmCallback:(index)=>{
        this.pickerSelect(index)
      }
    }),
    alignment: DialogAlignment.Bottom,
    customStyle: true,
    closeAnimation:{duration:0}
  })

  pickerSelect(index:number){
    if (index === 0) {
      photoPickerUtils.getPhotoPicker(1).then(value => {
        if (value['photoUris'].length > 0) {
          this.headerImg = value['photoUris'][0]
        }
      })
    }else {
      cameraPickerUtils.getCamera().then(value => {
        if (value.length > 0) {
          this.headerImg = value
        }
      })
    }
  }


  aboutToAppear() {
    let userType = SPHelper.default.getSync(SpConstants.USER_Type,"") as string
    if (userType && userType.length > 0) {
      this.userType = userType
    }

    this.getAccountOwnerInfo()
  }

  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})
        .onClick(()=>{
          // this.photoDialogController.open()
        })

        ///目前不支持头像上传，暂时屏蔽
        // Button('点击更换头像')
        //   .fontColor(Color.Gray)
        //   .fontSize(15)
        //   .backgroundColor(Color.White)
        //   .margin({top:10,bottom: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){
        if (this.dataSource.length > 0) {
          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 ///简介
      this.listData = []
      if (userName) {
        if (userName != this.currentUserInfo.userName) {
          this.currentUserInfo.userName = userName;
          this.currentUserInfo.editDataType = WDEditDataModelType.WDEditDataModelType_nickname
          this.listData.push(...EditInfoViewModel.getEditListInfo(this.currentUserInfo))
          // 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.listData.push(...EditInfoViewModel.getEditListInfo(this.currentUserInfo))
          // this.updateEditModel()
          // this.getAccountOwnerInfo()
        }
      }
    }
  }

  updateEditModel(){
    // this.listData.push(...EditInfoViewModel.getEditListInfo(this.currentUserInfo))
    EditInfoViewModel.updateUserInfo(this.currentUserInfo).then(()=>{
      this.getAccountOwnerInfo()
    })
  }

  async  getAccountOwnerInfo(){

    if (this.userType === '1') {
      EditInfoViewModel.queryAccountOwnerInfo(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))
      });
      this.getAreaList()
    }else {
      EditInfoViewModel.queryPeopleAccountOwnerInfo(getContext(this)).then((peopleItem) => {
        this.currentUserInfo = new editModel()
        this.currentUserInfo.userExtend.introduction = peopleItem.introduction
        this.currentUserInfo.userExtend.creatorId  = peopleItem.creatorId
        this.currentUserInfo.userName = peopleItem.userName
        this.headerImg = peopleItem.headPhotoUrl
        this.currentUserInfo.userType = Number(this.userType)
        this.currentUserInfo.userExtend.districtCode = peopleItem.district
        this.currentUserInfo.userExtend.cityCode = peopleItem.city
        this.currentUserInfo.userExtend.provinceCode = peopleItem.province
        // this.listData.push(...EditInfoViewModel.getEditListInfo(this.currentUserInfo))
        this.getAreaList()
      });
    }
  }

  getAreaList(){
    EditInfoViewModel.getAreaList(getContext(this)).then((value) =>{
      this.dataSource.push(...value)
      this.getAreaIndex()
    })
  }

  getAreaIndex(){
    if (this.userType === '1'){
      ///地区选择器当前位置
      if (this.currentUserInfo.userExtend.province.length > 0) {
        this.dataSource.forEach((element,index) => {
          if (element.label === this.currentUserInfo.userExtend.province) {
            this.firstSelect = index
            let currentFirst = EditInfoViewModel.getAreaListManageModel(element)
            currentFirst.children.forEach((element,index) => {
              if (element.label === this.currentUserInfo.userExtend.city) {
                this.secondSelect = index
                let currentSecondBean = EditInfoViewModel.getAreaListManageModel(element)
                currentSecondBean.children.forEach((element,index) => {
                  if (element.label === this.currentUserInfo.userExtend.county) {
                    this.thirdSelect = index
                  }
                });
              }
            });
          }
        });
      }
    }else {
      ///地区选择器当前位置
      if (this.currentUserInfo.userExtend.provinceCode.length > 0) {
        this.dataSource.forEach((element,index) => {
          if (element.code === this.currentUserInfo.userExtend.provinceCode) {
            this.firstSelect = index
            this.currentUserInfo.userExtend.province = element.label
            let currentFirst = EditInfoViewModel.getAreaListManageModel(element)
            currentFirst.children.forEach((element,index) => {
              if (element.code === this.currentUserInfo.userExtend.cityCode) {
                this.secondSelect = index
                this.currentUserInfo.userExtend.city = element.label
                let currentSecondBean = EditInfoViewModel.getAreaListManageModel(element)
                currentSecondBean.children.forEach((element,index) => {
                  if (element.code === this.currentUserInfo.userExtend.districtCode) {
                    this.currentUserInfo.userExtend.county = element.label
                    this.thirdSelect = index
                  }
                });
              }
            });
          }
        });
        this.listData = []
        this.currentUserInfo.userExtend.address = this.currentUserInfo.userExtend.province + this.currentUserInfo.userExtend.city + this.currentUserInfo.userExtend.county
        this.listData.push(...EditInfoViewModel.getEditListInfo(this.currentUserInfo))
      }
    }
  }
}