/*
 * 回放播放器工具栏
 * EZOpenSDK
 *
 * Created by junecheng on 2024/5/31.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
@Preview
@Component
export default struct PlaybackToolBar {
  // 播放器是否在播放中
  @Prop isPlaying: boolean
  // 播放器声音是否开启
  @Prop isOpenSound: boolean
  // 是否支持下载
  @Prop isSupportDownload: boolean
  // 播放速度
  @Prop playRate: string
  // 回放播放器工具栏是否可见
  @Prop isToolBarAreaShow: boolean
  onPlayClick?: () => void
  onVoiceClick?: () => void
  onDownloadClick?: () => void
  onRateClick?: () => void
  onLargeClick?: () => void

  build() {
    Column() {
      Row() {
        Image(this.isPlaying ? $r('app.media.preview_stopplay_btn') : $r('app.media.preview_play_btn')).width(35)
          .onClick(async () => {
            if (this.onPlayClick) {
              await this.onPlayClick()
            }
          })
        Image(this.isOpenSound ? $r('app.media.preview_voice_btn') : $r('app.media.preview_unvoice_btn')).width(35)
          .margin({ left: 15 })
          .onClick(async () => {
            if (this.onVoiceClick) {
              await this.onVoiceClick()
            }
          })
        Image($r('app.media.play_download')).width(18)
          .margin({ left: 15 })
          .onClick(async () => {
            if (this.onDownloadClick) {
              await this.onDownloadClick()
            }
          })
          .visibility(this.isSupportDownload ? Visibility.Visible : Visibility.Hidden)
        Image($r('app.media.play_rate')).width(18)
          .margin({ left: 25 })
          .onClick(() => {
            if (this.onRateClick) {
              this.onRateClick()
            }
          })
        // Text(this.playRate)
        //   .fontColor($r('app.color.C6C6C8'))
        //   .margin({ left: 25 })
        //   .fontSize(15)
        //   .onClick(() => {
        //     if (this.onRateClick) {
        //       this.onRateClick()
        //     }
        //   })
        Blank()
        Image($r('app.media.preview_enlarge')).width(35)
          .margin({ left: 10 })
          .onClick(() => {
            if (this.onLargeClick) {
              this.onLargeClick()
            }
          })
      }
      .width('100%')
      .height(40)
      .padding({ left: 10, right: 10 })
      .backgroundColor(Color.Black)
      .visibility(this.isToolBarAreaShow ? Visibility.Visible : Visibility.Hidden)
    }
    .id("bottomview_toolbar")
    .alignRules({
      top: { 'anchor': 'playback_slider', align: VerticalAlign.Bottom }
    })
    .backgroundColor(Color.Black)
  }
}