export class PlayerConstants {
  static readonly STATUS_IDLE: number = 0;
  static readonly STATUS_START: number = 1;
  static readonly STATUS_PAUSE: number = 2;
  static readonly STATUS_STOP: number = 3;
}


@Preview
@Component
export struct Test {
  @State progressVal: number = 10;
  @State status: number = PlayerConstants.STATUS_PAUSE;

  padding1(num: string) {
    let length = 2;
    for (let len = (num.toString()).length; len < length; len = num.length) {
      num = `${'0'}${num}`;
    }
    return num;
  }

  secondToTime(seconds: number) {
    let time = '00:00'
    let hourUnit = 60 * 60;
    let hour = Math.floor(seconds / hourUnit);
    let minute = Math.floor((seconds - hour * hourUnit) / 60);
    let second = seconds - hour * hourUnit - minute * 60;
    if (hour > 0) {
      return `${this.padding1(hour.toString())}${':'}${this.padding1(minute.toString())}${':'}${this.padding1(second.toString())}`;
    }
    if (minute > 0) {
      return `${this.padding1(minute.toString())}${':'}${this.padding1(second.toString())}`;
    } else {
      return `${'00'}${':'}${this.padding1(second.toString())}`;
    }
  }

  build() {
    Column() {

      Text() {
        Span(this.secondToTime(6))
        Span(' / ')
        Span('00:06')
      }
      .fontSize(24)
      .fontColor(Color.White)
      .fontWeight(600)
      .margin({ bottom: 30 })

      // .visibility(Visibility.None)

      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);
        })

    }
    .backgroundColor(Color.Blue)
    .height('100%')
  }
}