import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { PhotoHelper } from '@pura/picker_utils';
import { ToastUtils } from '../utils/ToastUtils';
import { DatePickerDialog } from './DatePickerDialog';

@CustomDialog
export struct CustomWatermarkDialog {
  confirm: (uri: string, title: string, date: Date, address: string) => void = () => {};

  @State imageUri?: string = undefined
  @State date?: Date = undefined
  private title?: string = undefined
  private address?: string = undefined

  private controller: CustomDialogController;

  getFormatData(date: Date): string {
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    return `${year}.${month}.${day}`
  }

  build() {
    Column() {
      RelativeContainer() {
        Text('加水印')
          .width('auto')
          .fontColor($r('app.color.color_212226'))
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
          .alignRules( {
            left: {anchor: '__container__', align: HorizontalAlign.Start},
            right: {anchor: '__container__', align: HorizontalAlign.End}
          })

        Image($r('app.media.ic_close')).width(20).height(20)
          .alignRules( {
            top: {anchor: '__container__', align: VerticalAlign.Top},
            right: {anchor: '__container__', align: HorizontalAlign.End}
          })
          .margin({ right: 16 })
          .onClick(() => {
            this.controller.close()
          })
      }
      .width('100%')
      .height(30)

      Column() {
        Row() {
          Text('图片').fontColor($r('app.color.color_666666')).fontSize(15)
          Blank().layoutWeight(1)
          Image(this.imageUri ? this.imageUri : $r('app.media.ic_add_watermark_image')).width(30).height(30)
          Image($r('app.media.ic_arrow_dp22')).width(22).height(22)
        }.height(54)
        .onClick(() => {
          PhotoHelper.selectEasy({
            MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
            maxSelectNumber: 1,
            isPhotoTakingSupported: false,
            isEditSupported: false,
            isOriginalSupported: false
          })
            .then((uris) => {
              if (uris.length != 0) {
                this.imageUri = uris[0]
              }
            })
        })
        Divider().strokeWidth(1).color($r('app.color.color_eeeeee'))
        Row() {
          Text('标题').fontColor($r('app.color.color_666666')).fontSize(15)
          TextInput({placeholder: '请输入'}).fontColor($r('app.color.color_1a1a1a')).fontSize(15).placeholderColor('#A6A8B2')
            .layoutWeight(1)
            .backgroundColor(Color.Transparent)
            .textAlign(TextAlign.End)
            .padding({right: 5})
            .onChange((text) => {
              this.title = text
            })
          Image($r('app.media.ic_arrow_dp22')).width(22).height(22)
        }.height(54)
        Divider().strokeWidth(1).color($r('app.color.color_eeeeee'))
        Row() {
          Text('时间').fontColor($r('app.color.color_666666')).fontSize(15)
          Blank().layoutWeight(1)
          Text(this.date ? this.getFormatData(this.date) : '请选择').fontColor(this.date ? $r('app.color.color_1a1a1a') : '#A6A8B2').fontSize(15).padding({right: 5})
          Image($r('app.media.ic_arrow_dp22')).width(22).height(22)
        }.height(54)
        .onClick(() => {
          DatePickerDialog.show(this.getUIContext(), {selectedDate: new Date(), confirm: (date) => {
            this.date = date
          }})
        })
        Divider().strokeWidth(1).color($r('app.color.color_eeeeee'))
        Row() {
          Text('地点').fontColor($r('app.color.color_666666')).fontSize(15)
          TextInput({placeholder: '请输入'}).fontColor($r('app.color.color_1a1a1a')).fontSize(15).placeholderColor('#A6A8B2')
            .layoutWeight(1)
            .backgroundColor(Color.Transparent)
            .textAlign(TextAlign.End)
            .padding({right: 5})
            .onChange((text) => {
              this.address = text
            })
          Image($r('app.media.ic_arrow_dp22')).width(22).height(22)
        }.height(54)
      }
      .padding({left: 16, right: 16})
      .margin({top: 20, bottom: 50})

      Button('确定', { type: ButtonType.Capsule, stateEffect: true })
        .fontColor(Color.White)
        .fontSize(16)
        .width('90%')
        .height(46)
        .margin({ top: 30 })
        .backgroundColor($r('app.color.color_466afd'))
        .onClick(() => {
          if (!this.imageUri) {
            ToastUtils.show('请选择图片')
            return
          }
          if (!this.title) {
            ToastUtils.show('请输入标题')
            return
          }
          if (!this.date) {
            ToastUtils.show('请选择时间')
            return
          }
          if (!this.address) {
            ToastUtils.show('请输入地点')
            return
          }
          if (this.confirm) {
            this.confirm(this.imageUri, this.title, this.date, this.address)
          }
          this.controller.close()
        })
    }
    .padding({ top: 30, bottom: 22 })
    .backgroundColor(Color.White)
    .width('100%')
  }
}