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

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

@Component
struct SettingPage {
  @State showReviseName: boolean = false
  @State showHeaderImgRevise: boolean = false
  @StorageProp(YTAvoid.SAFE_BOTTOM_KEY) private safeBottom: number = 0
  @StorageProp(UserInfo.KEY) private userInfo: UserInfo = userInfo
  @State private value: string = ''
  private yTPhotoHelper = new YTPhotoHelper(this.getUIContext().getHostContext()!)
  private reviseBuilderArr: Array<BasicType<undefined>> = [
    {
      text: '头像修改',
      src: '',
      click: () => {
        this.showHeaderImgRevise = true
      }
    },
    {
      text: '昵称修改',
      click: () => {
        this.showReviseName = true
      }
    }
  ]
  private options: BasicType<undefined>[] = [
    {
      text: '拍照',
      click: async () => {
        try {
          const fullpath = await this.yTPhotoHelper.takePicture()
          this.showHeaderImgRevise = false
          yTRouter.router2DelPhotoPage({ src: fullpath, type: 'header' })
        } catch (e) {
          YTLog.warn(e)
        }
      }
    },
    {
      text: '从相册中选择',
      click: () => {
        this.yTPhotoHelper.selectImage(
          (fullPath) => {
            this.showHeaderImgRevise = false
            yTRouter.router2DelPhotoPage({ src: fullPath, type: 'header' })
          })
      }
    },
    {
      text: '取消',
      click: () => {
        this.showHeaderImgRevise = false
      }
    },
  ]

  build() {
    Column() {
      YTHeader({ defaultStyle: { title: '用户设置' } })
      Column() {
        ForEach(this.reviseBuilderArr, (item: BasicType<undefined>, index) => {
          this.reviseBuilder(item)
          if (index < this.reviseBuilderArr.length - 1) {
            Column() {
              Text('')
                .height(1)
                .width('100%')
                .backgroundColor('#0A000000')
            }
            .padding({ left: 12, right: 8 })
            .bindSheet($$this.showHeaderImgRevise, this.changeBuilder, {
              height: 204,
              backgroundColor: Color.White,
              showClose: false
            })
          }
        })
        YTButton({
          btContent: '退出登录', click: () => {
            this.userInfo.logout()
            yTRouter.routerBack()
            IBestToast.show({ message: '退出登录成功' })
          }
        })
          .margin({ top: 426, bottom: 12 })
        YTButton({
          btContent: '注销用户',
          btFontColor: Color.Red,
          bgc: Color.White,
          click: () => {
            yTToast.doubleConfirm({
              text: '警告⚠', message: '确定要注销吗？\n注销后数据可能丢失无法恢复！', click: () => {
                userInfo.logout()
                yTToast.hide()
                yTRouter.routerBack()
              }
            })
          }
        })
      }
      .bindSheet($$this.showReviseName, this.reviseNameBuilder, {
        height: 275,
        showClose: false,
        backgroundColor: Color.White
      })
      .padding({
        left: 16,
        right: 16,
      })
    }
    .padding({ bottom: this.safeBottom })

  }

  @Builder
  reviseBuilder(item: BasicType<undefined>) {
    Row() {
      Text(item.text)
        .fontSize($r('[basic].float.page_text_font_size_12'))
        .fontColor('#80000000')
      Row() {
        if (typeof item.src == 'string') {
          Image(this.userInfo.getHeadImg() ? this.userInfo.getHeadImg() : $r('app.media.default_img'))
            .height(24)
            .width(24)
            .borderRadius(12)
        } else {
          Text(this.userInfo.getName() ?? this.userInfo.getPhoneNumber() ?? this.userInfo.getId()?.toString())
            .fontSize($r('[basic].float.page_text_font_size_12'))
            .fontColor('#CC000000')
        }
        Image($r('app.media.right_arrow'))
          .width(24)
          .width(24)
      }
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .padding({ left: 12, right: 4 })
    .height(36)
    .onClick(item.click)
  }

  @Builder
  reviseNameBuilder() {
    Column() {

      Text('昵称')
        .width('100%')
        .height(36)
        .textAlign(TextAlign.Start)
        .fontSize(12)

      TextInput({ text: $$this.value, placeholder: '请输入昵称' })
        .borderRadius(4)
        .fontSize(12)
        .placeholderFont({ size: 12 })
        .placeholderColor('#14000000')
        .height(36)
        .width('100%')
        .backgroundColor(Color.White)
        .border({ width: 1, color: '#14000000' })
        .margin({ bottom: 25 })
        .onChange((value) => {
          if (value.length > 7) {
            this.value = value.slice(0, 7)
            IBestToast.show({ type: "warning", message: '用户名称最大为7位' })
          }
        })

      Row({ space: 32 }) {
        YTButton({
          btContent: '取消',
          btHeight: 25,
          btWidth: 78,
          btBorder: { width: 1, color: '#1A000000' },
          btPadding: {
            left: 26,
            right: 26,
            top: 4,
            bottom: 4
          },
          bgc: Color.White,
          btFontColor: $r('sys.color.mask_secondary'),
          click: () => {
            this.showReviseName = false
            this.value = ''

          }
        })
        YTButton({
          btContent: '完成',
          btHeight: 25,
          btWidth: 78,
          btPadding: {
            left: 26,
            right: 26,
            top: 4,
            bottom: 4
          },
          click: () => {
            if (!this.value) {
              IBestToast.show({
                type: "warning",
                message: "昵称不能为空"
              })
              return
            }
            YTUserRequest.changeNickname(this.value, () => {
              IBestToast.show({ message: '名称修改成功' })
              this.showReviseName = false
            })

          }
        })
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')

    }
    .padding({ left: 22, right: 22, top: 8 })
  }

  @Builder
  changeBuilder() {
    reviseImgHeaderBuilder(this.options)
  }
}