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 { AreaListModel } from '../../model/AreaListModel';
import router from '@ohos.router';

@Entry
@Component
struct EditUserInfoPage {
  @State listData: EditListInfo[] = []
  @State  headerImg: string = ''
  @State dataSource: AreaListModel[] = []
  @State currentUserInfo: editModel = new editModel()

  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,
    offset:{dx:0,dy:-20}
  })

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

  onPageShow(){
    this.updateUserNameAndIntroduction()
  }

  build() {
    Row() {
      Column() {
        CustomTitleUI({titleName:'资料编辑'})
        Image(this.headerImg)
          .alt($r('app.media.default_head'))
          .backgroundColor(Color.Gray)
          .width(100)
          .height(100)
          .borderRadius(50)
          .margin({top:20,bottom:-10})

        Button('点击更换头像')
          .fontColor(Color.Gray)
          .fontSize(18)
          .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%')
  }

  @Builder
  RouterItem(r:EditListInfo,i:Number){
    Column(){
      Row(){
        Text(r.title)
          .fontSize(18)
          .fontColor(Color.Gray)
        Blank()

        Text(r.subTitle)
          .fontSize(16)
          .fontColor(Color.Gray)
          .padding({right:10})

        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) {
        DatePickerDialog.show({
          start:new Date('1900-1-1'),
          end:new Date(),
          selected:new Date,
          lunar:false,
          onAccept:(value:DatePickerResult) => {
            let mon = value.month as number + 1
            this.currentUserInfo.userExtend.birthday = value.year+'-'+mon.toString()+'-'+value.day;
            this.currentUserInfo.editDataType = WDEditDataModelType.WDEditDataModelType_birthday
            this.updateEditModel()
          }
        })
      }else if(i === 5){
        TextPickerDialog.show({
          range:['女','男'],
          selected:0,
          onAccept:(value:TextPickerResult) => {
            this.currentUserInfo.userExtend.sex = value.index as number;
            this.currentUserInfo.editDataType = WDEditDataModelType.WDEditDataModelType_sex
            this.updateEditModel()
          }
        })
      }
    })
  }

  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()
        }
      } else if (introduction){
        if (introduction != this.currentUserInfo.userExtend.introduction ) {
          this.currentUserInfo.userExtend.introduction = introduction;
          this.currentUserInfo.editDataType = WDEditDataModelType.WDEditDataModelType_intro
          this.updateEditModel()
        }
      }
    }
  }

  updateEditModel(){
    this.listData = []
    this.listData.push(...EditInfoViewModel.getEditListInfo(this.currentUserInfo))
    EditInfoViewModel.updateUserInfo(this.currentUserInfo)
  }
  getAccountOwnerInfo(){
    EditInfoViewModel.queryAccountOwnerInfo(1,getContext(this)).then((editModel) => {
      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)
    })
  }
}