import { ContentDetailDTO } from 'wdBean/Index';
import { DateTimeUtils, ToastUtils } from 'wdKit/Index';
import { PlayerConstants, WDPlayerController } from 'wdPlayer/Index';

@Reusable
@Component
export struct PlayerProgressView {
  private playerController?: WDPlayerController;
  @Consume contentDetailData: ContentDetailDTO
  @Consume progressVal: number;
  @Consume isOpenDetail: boolean
  @Consume isDragging: boolean
  @Consume status: number
  @State videoDuration: number = this.contentDetailData?.videoInfo?.[0]?.videoDuration || 1
  @State loadingTop: number = 10
  @State loadingWidth: number | string = 1
  @State showLoading: boolean = false
  @Consume onlyWifiLoadVideo: boolean
  timer: number = 0

  aboutToAppear() {
    if (this.playerController) {
      this.playerController.onSeekDone = (status: number) => {
        this.playerController?.play()
      }

      this.playerController.onLoaded = (loaded: number) => {
        if(loaded == 1) {
          this.loadingWidth = '95%'
          if (this.onlyWifiLoadVideo) {
            this.showLoading = true
          }
          this.timer = setTimeout(() => {
            ToastUtils.shortToast('网络出小差了，请检查下网络')
          }, 10000)
          // console.log("PlayerProgressView11", this.timer)
        } else {
          // console.log("PlayerProgressView22", this.timer)
          clearTimeout(this.timer)
          this.loadingWidth = 1
          this.showLoading = false
        }
      }
    }
  }

  /**
   *
   * loading 动效
   */
  @Builder
  playerLoadingBuilder() {

    Flex({
      direction: FlexDirection.Row,
      justifyContent: FlexAlign.Center,
      alignItems: ItemAlign.End
    }) {
      Text('')
        .backgroundColor(Color.Gray)
        .width(this.loadingWidth)
        .height(1)
        .animation({ duration: 500, curve: Curve.Ease, iterations: -1, playMode: PlayMode.Normal })
    }
    .width('100%')
    .zIndex(2000)
    .height(10)
    .visibility(this.showLoading ? Visibility.Visible: Visibility.Hidden)
    .margin({ bottom: 10 })
    // .markAnchor({ x: 0, y: '100%' })
  }

  build() {
    Stack() {
      this.playerLoadingBuilder()
      if(!this.showLoading) {
        Column() {
          Text() {
            Span(DateTimeUtils.secondToTime(Math.floor(this.progressVal / 100 * this.videoDuration)))
              .fontColor(Color.White)
            Span(' / ')
              .fontColor(Color.White)
            Span(DateTimeUtils.secondToTime(this.videoDuration))
              .fontColor('#888888')
          }
          .fontSize(24)

          .fontWeight(600)
          .margin({ bottom: 30 })
          .visibility(this.isDragging ? Visibility.Visible : Visibility.None)

          Slider({
            value: this.progressVal,
            step: 0.01,
            // style: SliderStyle.OutSet
          })
            .blockColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? $r('app.color.play_block_color') :
            Color.Transparent)
            .trackColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?
            $r('app.color.pause_track_color') : $r('app.color.play_track_color'))
            .selectedColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?
            $r('app.color.pause_selected_color') : $r('app.color.play_selected_color'))
            .trackThickness(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? 4 : 1)
            .blockStyle({
              type: this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? SliderBlockType.IMAGE :
              SliderBlockType.DEFAULT,
              image: $r('app.media.ic_player_block')
            })
            .blockSize({ width: 18, height: 12 })
            .width('100%')
            .height(19)
            .onChange((value: number, mode: SliderChangeMode) => {
              this.progressVal = value
              if (mode === SliderChangeMode.Moving) {
                this.isDragging = true
              }
              if (mode === SliderChangeMode.End) {
                this.isDragging = false
              }
              this.playerController?.setSeekTime(value, mode);
              console.log('slider onChange:', value, mode)

            })
        }
        .visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
      }
    }
  }
}