import { DateFormatUtil, WDAliPlayerController } from 'wdPlayer/Index'
import { ContentDetailDTO, LiveRoomDataBean } from 'wdBean/Index'
import { WindowModel } from 'wdKit/Index'
import { window } from '@kit.ArkUI'
import { DisplayDirection } from 'wdConstant/Index'


@Component
export struct PlayerVideoControlComponent {
  private playerController?: WDAliPlayerController
  @Consume liveRoomDataBean: LiveRoomDataBean
  @State currentTime: string = ''
  @State totalTime: string = ''
  @State progressVal: number = 0;
  //是否处于播放状态中
  @State isPlayStatus: boolean = true
  @Consume displayDirection: DisplayDirection
  @Consume contentDetailData: ContentDetailDTO
  @Consume isSmall:boolean
  @Consume isFullScreen: boolean

  aboutToAppear(): void {
    if (this.playerController) {
      //播放进度监听
      this.playerController.onTimeUpdate = (position: number, duration: number) => {
        this.currentTime = DateFormatUtil.secondToTime(Math.floor(position / 1000));
        this.totalTime = DateFormatUtil.secondToTime(Math.floor(duration / 1000));
        this.progressVal = Math.floor(position * 100 / duration);
      }
    }

  }

  build() {
    Row() {
      this.getBottomUIComponent()
    }
  }

  @Builder
  getBottomUIComponent() {
    Row() {
      this.playOrPauseBtn()

      if(this.contentDetailData.liveInfo?.liveState == 'running'){
        Blank().layoutWeight(1)
      }else{
        Text(this.currentTime)
          .fontColor(Color.White)
          .fontWeight(600)
          .fontSize('12fp')
          .margin({
            left: 16
          })
        this.playProgressView()
        Text(this.totalTime)
          .fontColor(Color.White)
          .fontWeight(600)
          .fontSize('12fp')
          .margin({
            right: 16
          })
      }
      //全屏按钮
      if(!this.isSmall) {
        Image($r('app.media.icon_live_player_full_screen'))
          .height(32)
          .width(32)
          .padding(5)
          .borderRadius($r('app.float.vp_16'))
          .border({width:0.5})
          .borderColor(0x4DFFFFFF)
          .backgroundColor(0x4D222222)
          .margin({right:10})
          .onClick(() => {
            WindowModel.shared.setSpecificSystemBarEnabled(false)
            this.displayDirection = DisplayDirection.VIDEO_HORIZONTAL
            WindowModel.shared.setPreferredOrientation(
              window.Orientation.LANDSCAPE)
            if(this.playerController){
              // if(this.playerController.onVideoSizePlayerUIComponentMethod){
              //   this.playerController.onVideoSizePlayerUIComponentMethod(1,2)
              // }
              if(this.playerController.onVideoSizePlayerComponentBack){
                this.playerController.onVideoSizePlayerComponentBack(1,2)
              }

              if(this.playerController.onVideoSizePlayerTitleComponentBack){
                this.playerController.onVideoSizePlayerTitleComponentBack(1,2)
              }
            }
            this.isFullScreen = true
          })
      }
    }
    .alignItems(VerticalAlign.Center)
    // .linearGradient({ angle: 0, colors: [['#99000000', 0], ['#00000000', 1]] })
    .width('100%')
    .padding({
      left: 10,
      right: 10,
      top: 15,
      bottom: 15
    })
  }

  @Builder
  playOrPauseBtn() {
    //暂停、播放
    Image(this.isPlayStatus ? $r('app.media.icon_live_player_pause') : $r('app.media.player_play_ic'))
      .width(24)
      .height(24)
      .onClick(() => {
        if (this.isPlayStatus) {
          this.isPlayStatus = false
          this.playerController?.pause()
        } else {
          this.isPlayStatus = true
          this.playerController?.play()
        }
      })
  }

  @Builder
  playProgressView() {
    Slider({
      value: this.progressVal,
      step: 1,
      style: SliderStyle.OutSet
    })
      // .blockSize({
      //   width: 18,
      //   height: 12
      // })
      .trackColor('#4DFFFFFF')
      .selectedColor('#FFED2800')
      .trackThickness(2)
      .blockStyle({
        type: SliderBlockType.IMAGE,
        image: $r('app.media.ic_player_block')
      })
      .blockSize({ width: 18, height: 12 })
      .height(14)
      .layoutWeight(1)
      .margin({
        left: 8,
        right: 8
      })
      .onChange((value: number, mode: SliderChangeMode) => {
        this.playerController?.setSeekTime(value, mode);
      })
  }
}