import { WDPlayerController, PlayerConstants } from 'wdPlayer';
import { PaperReaderSimpleDialog } from './PaperReaderDialog';
import { Logger } from 'wdKit/Index';
import { AudioSuspensionModel } from '../viewmodel/AudioSuspensionModel';

const TAG = 'AudioDialog';

@Preview
@CustomDialog
export struct AudioDialog {
  @Consume audioTitle: string;
  @Consume currentTime: string;
  @Consume totalTime: string;
  @Consume progressVal: number;
  @State currentStatus: number = 0;
  controllerDetail?: CustomDialogController

  private playerController: WDPlayerController = new WDPlayerController();
  private simpleAudioDialog: CustomDialogController = new CustomDialogController({
    builder: PaperReaderSimpleDialog({
      cancel: this.onCancel,
      confirm: this.onConfirm,
      playerController: this.playerController
    }),
    autoCancel: false,
    customStyle: true,
    alignment: DialogAlignment.CenterStart,
    offset: { dx: 12, dy: -150 },

  })

  private AudioSuspension = new AudioSuspensionModel(this.simpleAudioDialog)


  onCancel() {
    Logger.info(TAG, "cj2024 onCancel = ")
    this.AudioSuspension.setPlayerUrl()
  }

  /**
   *  回调无用
   **/
  onConfirm() {
    Logger.info(TAG, "cj2024 onConfirm = ")
    // if (this.playerController != undefined) {
    //
    // }
    // this.status = PlayerConstants.STATUS_PAUSE;
    // this.playerController?.pause()
  }

  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)
  }
}