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;
  @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @State isPlayEnd: boolean = false

  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()
    }
    this.playerController.onStatusChange = (status: number) =>{
      this.isPlayEnd = status === 5 ? true:false
    }
  }

  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)
        Column(){
          Image($r('app.media.icon_live_player_replay')).width(40).height(40)
            .onClick(() => {
              this.progressVal = 0
              this.isPlayEnd = false
              this.playerController.firstPlay(this.videoUrl)
            })
          Text('重播').fontColor(Color.White).fontSize(14)
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor("#80000000")
        .width('100%')
        .height('60%')
        .visibility(this.isPlayEnd ? Visibility.Visible : Visibility.None)
        Stack()
          .layoutWeight(1)
        this.getBottomUIComponent()
      }
    }
    .width('100%')
  }

  @Builder
  getTopUIComponent() {
    Column() {
      Row() {
        Image($r('app.media.icon_arrow_left_white'))
          .width(24)
          .height(24)
          .aspectRatio(1)
          .interpolation(ImageInterpolation.High)
          .margin({
            right: 10
          })

          .onClick(() => {
            router.back()
          })
      }
      .width('100%')
      .alignItems(VerticalAlign.Center)
      .margin({ top: `${this.topSafeHeight}px` })
    }.width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  getBottomUIComponent() {
    Column(){
      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)
      .height(40)
      .width('100%')
      .visibility(this.isPlayEnd ? Visibility.None:Visibility.Visible)
      .padding({
        left: 10,
        right: 10,
      })
    }
    .align(Alignment.Top)
    .height(64)
    .width('100%')
  }

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