import { PlayerConstants, WDPlayerController } from 'wdPlayer/Index';

@Component
export struct PlayerProgressView {
  private playerController?: WDPlayerController;
  @Consume progressVal: number;
  @State status: number = PlayerConstants.STATUS_START;

  aboutToAppear() {
    if (this.playerController) {
      this.playerController.onStatusChange = (status: number) => {
        this.status = status
      }
    }
  }

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