/*
 * 播放器工具栏
 * EZOpenSDK
 *
 * Created by junecheng on 2024/5/21.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
@Preview
@Component
export default struct ToolBar {
  // 播放器是否在播放中
  @Prop isPlaying: boolean
  // 播放器声音是否开启
  @Prop isOpenSound: boolean
  // 当前清晰度文本
  @Prop qualityTitle: ResourceStr
  // 每秒接收到的码流大小
  @Prop streamFlowValue: string
  onPlayClick?: () => void
  onVoiceClick?: () => void
  onQualityClick?: () => void
  onLargeClick?: () => void

  build() {
    Row({ space: 20 }) {
      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()
          }
        })
      Divider().vertical(true).height(16).color(Color.Gray)
      Image(this.isOpenSound ? $r('app.media.preview_voice_btn') : $r('app.media.preview_unvoice_btn')).width(35)
        .onClick(async () => {
          if (this.onVoiceClick) {
            await this.onVoiceClick()
          }
        })
      Divider().vertical(true).height(16).color(Color.Gray)
      Text(this.qualityTitle).fontSize(14).fontColor(Color.Gray).width(35).textAlign(TextAlign.Center)
        .onClick(() => {
          if (this.onQualityClick) {
            this.onQualityClick()
          }
        })
      Divider().vertical(true).height(16).color(Color.Gray)
      Text(this.streamFlowValue).fontSize(14).fontColor(Color.Gray).ellipsisMode(EllipsisMode.END).width(70).maxLines(2)
      Blank()

      Image($r('app.media.preview_enlarge')).width(40)
        .onClick(() => {
          if (this.onLargeClick) {
            this.onLargeClick()
          }
        })
    }
    .width('100%')
    .height(40)
    .padding({ left: 20, right: 20 })
    .backgroundColor(Color.Black)
    .id("bottomview_toolbar")
    .alignRules({
      top: { 'anchor': 'realplay_view', align: VerticalAlign.Bottom }
    })
  }
}