/*
 * 对讲视图
 * EZOpenSDK
 *
 * Created by junecheng on 2024/5/21.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
import { EZVoiceChangeType } from '@ohos/EZOpenSDK'

@Component
export default struct TalkView {
  // 对讲视图是否显示
  @Link isTalkViewShow: boolean
  // 是否是半双工对讲
  @Prop isHalfDuplex: boolean
  // 半双工是否处于'说'状态
  @State isHalfDuplexSpeakingStatus: boolean = false
  // 半双工对讲按钮点击
  onHalfDuplexTalkClick?: (isHalfDuplexSpeakingStatus: boolean) => void
  // 对讲变声选择
  onTalkVoiceChangeClick?: (voiceChangeType: EZVoiceChangeType) => void
  // 关闭按钮点击
  onTalkViewCloseClick?: () => void
  // 本地音频音量大小
  @Prop voiceTalkLoudness: number = -90

  build() {

    RelativeContainer() {
      Image($r("app.media.play_close"))
        .width(50)
        .height(50)
        .id("bottomview_talk_view_close")
        .alignRules({
          top: { 'anchor': '__container__', align: VerticalAlign.Top },
          right: { 'anchor': '__container__', align: HorizontalAlign.End }
        })
        .onClick(async () => {
          this.isTalkViewShow = false
          if (this.onTalkViewCloseClick) {
            await this.onTalkViewCloseClick()
          }
        })
      // (半双工 && '说'状态) || 全双工，显示preview_talkback_during，否则显示preview_talkback
      Image((this.isHalfDuplex && this.isHalfDuplexSpeakingStatus) || !this.isHalfDuplex ?
      $r('app.media.preview_talkback_during') : $r('app.media.preview_talkback'))
        .width(100)
        .height(100)
        .id("bottomview_talk_view_mic")
        .alignRules({
          center: { 'anchor': '__container__', align: VerticalAlign.Center },
          middle: { 'anchor': '__container__', align: HorizontalAlign.Center }
        })
        .enabled(this.isHalfDuplex)// 半双工才能响应
        .onClick(() => {
          if (this.onHalfDuplexTalkClick) {
            this.isHalfDuplexSpeakingStatus = !this.isHalfDuplexSpeakingStatus
            this.onHalfDuplexTalkClick(this.isHalfDuplexSpeakingStatus)
          }
        })
      // 暂未实现
      Column() {
        Button('原声')
          .fontSize(15)
          .height(30)
          .fontColor(Color.Black)
          .width(90)
          .backgroundColor($r('app.color.C6C6C8'))
          .borderRadius(2)
          .type(ButtonType.Normal)
          .onClick(() => {
            if (this.onTalkVoiceChangeClick) {
              this.onTalkVoiceChangeClick(EZVoiceChangeType.EZVoiceChangeTypeNormal)
            }
          })
        Button('小丑音')
          .fontSize(15)
          .height(30)
          .fontColor(Color.Black)
          .width(90)
          .backgroundColor($r('app.color.C6C6C8'))
          .borderRadius(2)
          .type(ButtonType.Normal)
          .margin({ top: 10 })
          .onClick(() => {
            if (this.onTalkVoiceChangeClick) {
              this.onTalkVoiceChangeClick(EZVoiceChangeType.EZVoiceChangeTypeClown)
            }
          })
        Button('大叔音')
          .fontSize(15)
          .height(30)
          .fontColor(Color.Black)
          .width(90)
          .backgroundColor($r('app.color.C6C6C8'))
          .borderRadius(2)
          .type(ButtonType.Normal)
          .margin({ top: 10 })
          .onClick(() => {
            if (this.onTalkVoiceChangeClick) {
              this.onTalkVoiceChangeClick(EZVoiceChangeType.EZVoiceChangeTypeMan)
            }
          })
      }
      .margin({ left: 20, top: 10 })
      .id("view_voice_change")
      .alignRules({
        top: { 'anchor': '__container__', align: VerticalAlign.Top },
        left: { 'anchor': '__container__', align: HorizontalAlign.Start }
      })
      .visibility(Visibility.Hidden)
      Text(`本地音频音量：${this.voiceTalkLoudness.toFixed(1)}分贝`)
        .fontColor(Color.Gray).fontSize(16)
        .alignRules({
          top: { 'anchor': 'view_voice_change', align: VerticalAlign.Top },
          left: { 'anchor': 'view_voice_change', align: HorizontalAlign.End }
        })
        .margin({ top: 5, left: 10 })
    }
    .backgroundColor(Color.White)
    .id("bottomview_talk_view")
    .width('100%')
    .alignRules({
      bottom: { 'anchor': 'bottom_view', align: VerticalAlign.Bottom },
      top: { 'anchor': 'bottomview_toolbar', align: VerticalAlign.Bottom }
    })
    .visibility(this.isTalkViewShow ? Visibility.Visible : Visibility.Hidden)
  }
}