import { ContentDetailDTO } from 'wdBean/Index';
import { DateTimeUtils, EmitterEventId, EmitterUtils, 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
  @Prop index: number = 0
  @Prop @Watch('currentIndexChange') currentIndex: number = 0
  timer: number = 0

  currentIndexChange() {
    // console.log('DetailPlayShortVideoPage PlayerProgressView', 'currentIndex:', this.currentIndex,'index:', this.index)
    if (this.playerController && this.index == this.currentIndex) {
      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
        }
      }
    }
  }

  aboutToAppear() {
    if (this.playerController) {
      this.playerController.onSeekDone = (status: number) => {
        this.playerController?.play()
      }
    }
    // 注册监听网络连接
    EmitterUtils.receiveEvent(EmitterEventId.NETWORK_CONNECTED, (async (str?: string) => {
      if (this.timer) {
        clearTimeout(this.timer)
      }
    }))
  }

  /**
   *
   * 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: 14 })

    // .markAnchor({ x: 0, y: '100%' })
  }

  aboutToDisappear(): void {
    clearTimeout(this.timer)
  }

  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('#99FFFFFF')
          }
          .fontSize(24)

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

          Row() {
            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(24)
              .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)

              })
          }
          .width('100%')
          .padding({ left: 6, right: 6 })
          .height(24)
          .justifyContent(FlexAlign.Center)

        }
        .visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
      }
    }
    .onDisAppear(() => clearTimeout(this.timer))
  }
}