import {
  BasicType,
  DiaLogCompControl,
  IBestToast,
  userInfo,
  UserInfo,
  YTAvoid,
  YTHeader,
  YTLog,
  YTPhotoHelper,
  yTRouter,
  YTUserRequest
} from 'basic'

@Builder
function settingBuilder() {
  NavDestination() {
    SettingPage()
  }
  .hideTitleBar(true)
}

@Component
struct SettingPage {
  @StorageProp(YTAvoid.SAFE_BOTTOM_KEY) private safeBottom: number = 0
  @StorageProp(UserInfo.KEY) private userInfo: UserInfo = userInfo
  @State private value: string = ''
  private yTPhotoHelper = new YTPhotoHelper()

  private reviseBuilderArr: Array<BasicType> = [
    {
      text: '我的昵称', src: '名称',
      click: () => {
        this.openReviseNameBuilder()
      }
    }, {
      text: '绑定手机号',
      message: this.userInfo.getPhoneNumber() ?? '',
      click: () => {
        // this.openChangeBuilder()
      }
    }
  ]

  private reviseBuilderArr1: Array<BasicType> = [
    { text: '宝贝头像', src: '头像',
      click: () => {
        this.openChangeBuilder()
      }
    }, {
      text: '宝贝昵称', src: '名称',
      click: () => {
        // this.openReviseNameBuilder()
      }
    }, {
      text: '性别',
      click: () => {
        // this.openReviseNameBuilder()
      }
    }, {
      text: '生日',
      click: () => {
        // this.openReviseNameBuilder()
      }
    },
  ]


  private options: BasicType[] = [
    {
      text: '拍照',
      click: async () => {
        try {
          const fullpath = await this.yTPhotoHelper.takePicture()
          yTRouter.router2DelPhotoPage({ src: fullpath, type: 'header' })
        } catch (e) {
          YTLog.warn(e)
        }
      }
    },
    {
      text: '从相册中选择',
      click: () => {
        this.yTPhotoHelper.selectImage(
          (fullPath) => {
            yTRouter.router2DelPhotoPage({ src: fullPath, type: 'header' })
          })
      }
    }
  ]

  // 打开头像修改弹窗
  openChangeBuilder() {
    yTRouter.router2BottomDialog({
      params: this.options
    }, (info: PopInfo) => {
      let ans = info.result as string
      if (ans == '拍照') {
        this.options?.[0]?.click?.()
      } else if(ans == '从相册中选择') {
        this.options?.[1]?.click?.()
      }
    })
  }

  // 打开名称修改弹窗
  openReviseNameBuilder() {
    let control = new DiaLogCompControl(this.getUIContext())
    yTRouter.router2CenterDialog({
      param: { text: this.userInfo.getName() ?? this.userInfo.getPhoneNumber() ?? this.userInfo.getId()?.toString() },
      control: control,
      builder: () => {
        this.ReviseName({ text: this.userInfo.getName() ?? this.userInfo.getPhoneNumber() ?? this.userInfo.getId()?.toString() }, control)
      }
    }, (info: PopInfo) => {
      let ans = info.result as string
      YTUserRequest.changeNickname(ans, () => {
        IBestToast.show({ message: '名称修改成功' })
      })
    })
  }

  build() {
    Column() {
      YTHeader({ defaultStyle: { title: '用户设置' }, bgc: Color.White })

      Column({space: 16}) {
        this.reviseBuilder(this.reviseBuilderArr)

        this.reviseBuilder(this.reviseBuilderArr1)

        // YTButton({
        //   btContent: '注销用户',
        //   btFontColor: '#991C1C1C',
        //   btFontSize: 16,
        //   btHeight: 48,
        //   btBorderRadius: 40,
        //   bgc: Color.White,
        //   click: () => {
        //     yTToast.doubleConfirm({
        //       message: '注销后无法恢复,是否确定注销?', click: () => {
        //         YTUserRequest.logout(() => {
        //           yTToast.hide()
        //           yTRouter.routerBack()
        //           setTimeout(() => {
        //             IBestToast.show('注销成功')
        //           }, 50)
        //         })
        //
        //       }
        //     })
        //   }
        // })
        // YTButton({
        //   btContent: '退出登录',
        //   click: () => {
        //     this.userInfo.logout()
        //     yTRouter.routerBack()
        //     IBestToast.show({ message: '退出登录成功' })
        //   },
        //   btFontSize: 16,
        //   btHeight: 48,
        //   btBorderRadius: 40,
        // })

      }
      .padding({ left: 16, right: 16, top: 22 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F7F9FA')
    .padding({ bottom: this.safeBottom })
  }

  @Builder
  reviseBuilder(params: Array<BasicType>) {
    Column(){
      ForEach(params, (item: BasicType, index) => {
        Row() {
          Text(item.text)
            .fontSize($r('[basic].float.page_text_font_size_12'))
            .fontColor('#FF1C1C1C')
            .fontWeight(500)
            .fontSize(16)
          Row() {
            if (item.src == '头像') {
              Image(this.userInfo.getHeadImg() ? this.userInfo.getHeadImg() : $r('app.media.default_img'))
                .height(32)
                .width(32)
                .borderRadius(99)
            } else if (item.src == '名称') {
              Text(this.userInfo.getName() ?? this.userInfo.getPhoneNumber() ?? this.userInfo.getId()?.toString())
                .fontSize(16)
                .fontColor('#E61C1C1C')
            } else {
              Text(item.message)
                .fontSize(16)
                .fontColor('#E61C1C1C')
            }
            Image($r('app.media.right_arrow'))
              .width(24)
              .width(24)
          }
        }
        .width('100%')
        .onClick(item.click)
        .justifyContent(FlexAlign.SpaceBetween)

        if(index != params.length - 1) {
          Divider().width('100%').height(1).backgroundColor('#FBFBFB')
            .margin({top: 15, bottom: 15})
        }
      })
    }
    .padding(15)
    .borderRadius(8)
    .backgroundColor(Color.White)
  }

  @Builder
  ReviseName(param: BasicType, control: DiaLogCompControl){
  Column(){
    Text('宝贝昵称')
      .fontSize(16)
      .fontWeight(600)
      .fontColor('#FF000000')

    TextInput({text: param.text})
      .padding(10)
      .borderRadius(7)
      .backgroundColor('#F5F7F5')
      .onChange((text) => {
        param.text = text
      })
      .margin({top: 17})

    Row({space: 42}){
      Text('取消')
        .borderRadius(22)
        .fontColor('#FF000000')
        .backgroundColor('#FFF5F7F5')
        .padding({top: 10, left: 36, right: 36, bottom: 10})
        .onClick(() => {
          control._onBackPress()
        })

      Text('保存')
        .borderRadius(22)
        .fontColor('#FF000000')
        .backgroundColor('#FFFECF2F')
        .padding({top: 10, left: 36, right: 36, bottom: 10})
        .onClick(() => {
          if (!param.text) {
            IBestToast.show({
              type: "warning",
              message: "昵称不能为空"
            })
            return
          }
          control._onBackPress(param.text)
        })
    }
    .margin({top: 12})
  }
  .width(312)
  .height(158)
  .borderRadius(12)
  .backgroundColor(Color.White)
  .alignItems(HorizontalAlign.Center)
  .padding({left: 32, right: 32, top: 16, bottom: 8})
}
}