/*
 * 回放倍数设置视图
 * EZOpenSDK
 *
 * Created by junecheng on 2024/4/14.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
import { EZPlaybackRate } from '@ohos/EZOpenSDK'

@Preview
@Component
export default struct ChoosePlayRateView {
  @Prop isPlayRateViewShow: boolean = true
  // 是否是云存储回放倍数
  @Prop isCloudPlaybackRate: boolean = true
  // 倍数数组
  @State playbackRateArray: Array<EZPlaybackRate> =
    [EZPlaybackRate.EZOPENSDK_PLAY_RATE_1, EZPlaybackRate.EZOPENSDK_PLAY_RATE_4, EZPlaybackRate.EZOPENSDK_PLAY_RATE_8,
      EZPlaybackRate.EZOPENSDK_PLAY_RATE_16, EZPlaybackRate.EZOPENSDK_PLAY_RATE_32]
  @State playbackRateStrArray: Array<string> = ['1x', '4x', '8x', '16x', '32x']
  onPlayRateClick?: (playbackRate: EZPlaybackRate, playbackRateStr: string) => void

  build() {
    Stack() {
      Column() {
        ForEach(this.playbackRateStrArray, (item: string, index) => {
          Text(item)
            .fontSize(14)
            .fontColor($r('app.color.C6C6C8'))
            .height(30)
            .width('100%')
            .textAlign(TextAlign.Center)
            .visibility(!this.isCloudPlaybackRate && item == '32x' ? Visibility.None : Visibility.Visible)
            .onClick(async () => {
              if (this.onPlayRateClick) {
                await this.onPlayRateClick(this.playbackRateArray[index], item)
              }
            })
        })
      }
    }
    .width(60)
    .backgroundImage($r('app.media.picture_bg'))
    .backgroundImageSize({ width: '100%', height: '100%' })
    .margin({ left: 132 })
    .padding({ top: 6, bottom: 14 })
    .id('play_rate_view')
    .alignRules({
      left: { 'anchor': '__container__', align: HorizontalAlign.Start },
      bottom: { 'anchor': 'bottomview_toolbar', align: VerticalAlign.Top }
    })
    .visibility(this.isPlayRateViewShow ? Visibility.Visible : Visibility.None)
  }
}