import { UserEntity } from '../../../../entity/UserEntity'
import { TitleBar } from '../../../../view/TitleBar'
import { UserSettingsViewModel } from '../../../../viewModel/UserSettingsViewModel'
import { photoAccessHelper } from '@kit.MediaLibraryKit'
import { PhotoHelper } from '@pura/picker_utils'
import { ToastUtils } from '../../../../utils/ToastUtils'
import { BusinessError } from '@kit.BasicServicesKit'
import { UploadImgEntity } from '../../../../entity/UploadImgEntity'
import { EditTextDialog } from '../../../../dialog/EditTextDialog'
import { StrUtil } from '@pura/harmony-utils'

@Entry
@ComponentV2
struct UserSettingsPage {
  viewModel: UserSettingsViewModel = new UserSettingsViewModel(this.getUIContext())

  @Local userinfo?: UserEntity

  @Monitor('viewModel.userEntity')
  onUserinfoChange(monitor: IMonitor) {
    this.userinfo = monitor.value()?.now as UserEntity;
  }

  @Monitor('viewModel.imageEntity')
  onImageChange(monitor: IMonitor) {
    const image = monitor.value()?.now as UploadImgEntity;
    const params: Record<string, string> = {
      'avater': image.url
    }
    this.viewModel.updateUserinfo(params)
  }

  @Monitor('viewModel.update')
  onUpdate(monitor: IMonitor) {
    this.viewModel.userinfo()
    ToastUtils.show('修改成功')
  }

  aboutToAppear(): void {
    this.viewModel.userinfo()
  }

  build() {
    Column() {
      TitleBar()

      Image(StrUtil.isNotEmpty(this.userinfo?.avater) ? this.userinfo?.avater : $r('app.media.ic_default_avatar'))
        .width(100)
        .height(100)
        .borderRadius(50)
        .margin({ top: 40 })
        .padding(1)
        .backgroundColor(Color.White)
        .onClick(() => {
          PhotoHelper.select({
            MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
            maxSelectNumber: 1,
            isOriginalSupported: false
          })
            .then((result: photoAccessHelper.PhotoSelectResult) => {
              if (result.photoUris.length > 0) {
                this.viewModel.uploadImage(result.photoUris[0])
              }
            })
            .catch((e: BusinessError) => {
              ToastUtils.show(e.message)
            })
        })

      Text('昵称').fontSize(15).fontColor($r('app.color.color_222222')).margin({ left: '6%', top: 55 }).alignSelf(ItemAlign.Start)

      Text(this.userinfo?.name)
        .width('88%')
        .height(48)
        .fontSize(15)
        .fontColor($r('app.color.color_1a1a1a'))
        .maxLines(1)
        .padding({ left: 14, right: 14 })
        .margin({ top: 12 })
        .borderRadius(8)
        .backgroundColor(Color.White)
        .onClick(() => {
          EditTextDialog.show(this.getUIContext(), { title: '编辑昵称', content: this.userinfo?.name,  confirm: (content) => {
            const params: Record<string, string> = {
              'name': content
            }
            this.viewModel.updateUserinfo(params)
          }})
        })

      Text('会员').fontSize(15).fontColor($r('app.color.color_222222')).margin({ left: '6%', top: 30 }).alignSelf(ItemAlign.Start)

      Text(this.userinfo?.vip === 1 ? '未开通' : this.userinfo?.vip === 2 ? this.userinfo?.vip_expire + ' 到期' : '终身会员')
        .width('88%')
        .height(48)
        .fontSize(15)
        .fontColor($r('app.color.color_1a1a1a'))
        .maxLines(1)
        .padding({ left: 14, right: 14 })
        .margin({ top: 12 })
        .borderRadius(8)
        .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.window_background'))
  }
}