/**
 * 简易音频对话框
 * */
import { PlayerConstants, WDPlayerController } from 'wdPlayer/Index'

@CustomDialog
export struct PaperReaderSimpleDialog {
  cancel: () => void = () => {
  }
  confirm: () => void = () => {
  }
  playerController: WDPlayerController = new WDPlayerController()
  paperReaderDialog: CustomDialogController = new CustomDialogController({
    builder: PaperReaderDialog({
      onCancel: this.cancel,
      onConfirm: this.confirm,
      playerController: this.playerController
    }),
    autoCancel: false,
    customStyle: true,

    alignment: DialogAlignment.CenterStart,
    offset: { dx: 12, dy: -150 }
  })
  controllerSimple?: CustomDialogController // // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在所有controller的后面

  build() {
    Row() {
      Image($r("app.media.icon_audio_pause"))
        .objectFit(ImageFit.Contain)
        .margin(18)
        .width(24)
        .height(24)
    }
    .width(60)
    .height(60)
    .backgroundColor(Color.White)
    .onClick(() => {
      if (this.controllerSimple) {
        this.controllerSimple.close()
        this.paperReaderDialog.open()
        if (this.paperReaderDialog) {
          setTimeout(() => {
            console.log('PaperReaderSimpleDialog delay 1s');
            if (this.paperReaderDialog != undefined) {
              this.paperReaderDialog.close()
            }
            if (this.controllerSimple != undefined) {
              this.controllerSimple.open()
            }
          }, 500000);
        }
      }

    })

  }
}

/**
 * 图文音频对话框
 * */
@CustomDialog
export struct PaperReaderDialog {
  @Consume audioTitle: string;
  @Consume currentTime: string;
  @Consume totalTime: string;
  @Consume progressVal: number;
  @State currentStatus: number = 0;
  playerController: WDPlayerController = new WDPlayerController()
  controllerDetail?: CustomDialogController
  onCancel: () => void = () => {
  }
  onConfirm: () => void = () => {
  }

  build() {
    Stack({ alignContent: Alignment.End }) {
      Column() { //标题 时间 进度条
        Marquee({
          start: true,
          step: 5,
          loop: Number.POSITIVE_INFINITY,
          fromStart: true,
          src: this.audioTitle
        })
          .width("60%")
          .height(20)
          .fontColor($r("app.color.color_222222"))
          .fontSize(14)
          .margin({ top: 10, left: 10 })
          .alignSelf(ItemAlign.Start)
          .onStart(() => {
            console.info('Marquee animation complete onStart')
          })
          .onBounce(() => {
            console.info('Marquee animation complete onBounce')
          })
          .onFinish(() => {
            console.info('Marquee animation complete onFinish')
          })

        Row() {
          Text(this.currentTime)
            .fontSize($r('app.float.font_size_12'))
            .fontColor($r('app.color.color_999999'))
            .height("100%")
            .alignSelf(ItemAlign.Start)
          Text("/" + this.totalTime)
            .fontSize($r('app.float.font_size_12'))
            .fontColor($r('app.color.color_999999'))
            .height("100%")
            .alignSelf(ItemAlign.Start)

        }
        .width("100%")
        .height(16)
        .margin({ top: 4, left: 10 })

        Progress({ value: this.progressVal, total: 100, type: ProgressType.Capsule })
          .color($r('app.color.color_ED2800'))
          .backgroundColor($r('app.color.white'))
          .width("100%")
          .height(3)
          .margin({ top: 7 })
      }
      .width("100%")
      .height("100%")
      .justifyContent(FlexAlign.Start)

      Row() {
        Image(this.currentStatus != PlayerConstants.STATUS_START ? $r("app.media.icon_audio_pause") : $r("app.media.icon_audio_playing"))
          .objectFit(ImageFit.Contain)
          .width(24)
          .height(24)
          .margin({ right: 12 })
          .onClick(() => {
            if (this.playerController) {
              // this.onConfirm()
              this.playerController.switchPlayOrPause()
              this.currentStatus = this.playerController.getStatus()
            }
          })

        Image($r("app.media.icon_audio_close"))
          .objectFit(ImageFit.Contain)
          .width(24)
          .height(24)
          .onClick(() => {
            if (this.playerController) {
              this.playerController.stop()
            }
            if (this.controllerDetail) {
              this.controllerDetail.close()
            }
          })
      }.width(80)
      .height(60)

    }
    .width("65%")
    .height(60)
    .backgroundColor(Color.White)
    .borderRadius(2)
  }
}