import { DateFormatUtil, WDAliPlayerController, WDPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index';
import router from '@ohos.router';
import { StringUtils } from 'wdKit/Index';
import { Action } from 'wdBean';

const TAG = 'VideoPlayPage';

@Entry
@Component
export struct VideoPlayPage {
  //是否处于播放状态中
  @State isPlayStatus: boolean = true
  playerController: WDAliPlayerController = new WDAliPlayerController();
  //视频地址
  @State videoUrl: string = ''
  //封面图
  @State videoCoverUrl: string = ''
  @State currentTime: string = ''
  @State totalTime: string = ''
  @State progressVal: number = 0;

  aboutToAppear(): void {
    let par: Action = router.getParams() as Action
    let params = par?.params
    this.videoUrl = params?.videoUrl ? params?.videoUrl : ''
    this.videoCoverUrl = params?.videoCoverUrl ? params?.videoCoverUrl : ''
    //播放进度监听
    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);
    }
    this.playerController.onCanplay = () => {
      this.playerController.play()
    }
  }

  build() {
    Stack() {
      WDPlayerRenderLiveView({
        playerController: this.playerController,
        onLoad: async () => {
          this.playerController.firstPlay(this.videoUrl)
        }
      })
        .height('100%')
        .width('100%')
        .visibility(StringUtils.isEmpty(this.videoUrl) ? Visibility.None : Visibility.Visible)
      Image(this.videoCoverUrl)
        .objectFit(ImageFit.Contain)
        .visibility(StringUtils.isEmpty(this.videoUrl) ? Visibility.Visible : Visibility.None)
      Column() {
        this.getTopUIComponent()
        Stack()
          .layoutWeight(1)
        this.getBottomUIComponent()
      }
    }
    .width('100%')
  }

  @Builder
  getTopUIComponent() {
    Column() {
      Row() {
        Image($r('app.media.icon_arrow_left_white'))
          .width(24)
          .aspectRatio(1)
          .margin({
            right: 10
          })
          .onClick(() => {
            router.back()
          })
      }
      .width('100%')
      .alignItems(VerticalAlign.Center)
      .margin({
        bottom: 10
      })
    }.width('100%')
    .padding({
      top: 20,
      bottom: 6,
      left: 10,
      right: 10
    })
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  getBottomUIComponent() {
    Row() {
      this.playOrPauseBtn()
      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
        })
    }
    .alignItems(VerticalAlign.Center)
    .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
      })
      .blockStyle({
        type: SliderBlockType.IMAGE,
        image: $r('app.media.ic_player_block')
      })
      .blockColor(Color.White)
      .trackColor('#4DFFFFFF')
      .selectedColor('#FFED2800')
      .height(14)
      .trackThickness(1)
      .layoutWeight(1)
      .margin({
        left: 8,
        right: 8
      })
      .onChange((value: number, mode: SliderChangeMode) => {
        this.playerController?.setSeekTime(value, mode);
      })
  }

  onPageHide(): void {
    this.playerController?.pause()
    this.playerController?.stop()
  }
}