/*
 * 操控视图
 * EZOpenSDK
 *
 * Created by junecheng on 2024/5/21.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */

import OperateButton from './OperateButton'

@Component
export default struct OperateView {
  // 是否支持云台
  @Prop isSupportPTZ: boolean
  // 是否支持对讲
  @Prop isSupportTalk: boolean
  // 是否支持截图
  @Prop isSupportCapture: boolean
  // 是否支持录像
  @Prop isSupportLocalRecord: boolean
  // 是否在录制中
  @Prop isLocalRecording?: boolean
  onOperateClick?: (type: EZOperateButton, isRecording?: boolean) => void

  build() {
    RelativeContainer() {
      // 云存储
      Column({ space: 10 }) {
        Column() {
          Image($r('app.media.cloud')).width(32).height(32)
          Text($r('app.string.setting_cloud_storage')).fontSize(12).fontColor(Color.Gray)
        }.visibility(Visibility.Hidden)
      }
      .margin({ top: 20, right: 20 })
      .id("bottomview_btns")
      .alignRules({
        top: { 'anchor': 'bottomview_toolbar', align: VerticalAlign.Bottom },
        right: { 'anchor': '__container__', align: HorizontalAlign.End }
      })

      // 控制视图
      Column({ space: 20 }) {
        Row({ space: 40 }) {
          // 云台
          OperateButton({
            isRecordButton: false,
            isLocalRecording: false,
            isSupport: this.isSupportPTZ,
            operateName: $r('app.string.preview_ptz'),
            currentImage: this.isSupportPTZ ? $r('app.media.preview_barrel') : $r('app.media.preview_barrel_dis'),
            normalImage: $r('app.media.preview_barrel'),
            selectImage: $r('app.media.preview_barrel_sel'),
            onOperateClick: async () => {
              if (this.onOperateClick) {
                await this.onOperateClick(EZOperateButton.EZOperateButton_PTZ)
              }
            }
          })
          // 对讲
          OperateButton({
            isRecordButton: false,
            isLocalRecording: false,
            isSupport: this.isSupportTalk,
            operateName: $r('app.string.preview_talk'),
            currentImage: this.isSupportTalk ? $r('app.media.preview_talkback') : $r('app.media.preview_talkback_dis'),
            normalImage: $r('app.media.preview_talkback'),
            selectImage: $r('app.media.preview_talkback_sel'),
            onOperateClick: async () => {
              if (this.onOperateClick) {
                await this.onOperateClick(EZOperateButton.EZOperateButton_Talk)
              }
            }
          })
        }

        Row({ space: 40 }) {
          // 截图
          OperateButton({
            isRecordButton: false,
            isLocalRecording: false,
            isSupport: this.isSupportCapture,
            operateName: $r('app.string.preview_capture'),
            currentImage: this.isSupportCapture ? $r('app.media.preview_screenshot') : $r('app.media.preview_screenshot_dis'),
            normalImage: $r('app.media.preview_screenshot'),
            selectImage: $r('app.media.preview_screenshot_sel'),
            onOperateClick: async () => {
              if (this.onOperateClick) {
                await this.onOperateClick(EZOperateButton.EZOperateButton_Capture)
              }
            }
          })
          // 录像
          OperateButton({
            isRecordButton: true,
            isLocalRecording: this.isLocalRecording,
            isSupport: this.isSupportLocalRecord,
            operateName: $r('app.string.preview_record'),
            currentImage: this.isSupportLocalRecord ? $r('app.media.preview_recording') : $r('app.media.preview_recording_dis'),
            normalImage: $r('app.media.preview_recording'),
            selectImage: $r('app.media.preview_recording_sel'),
            onOperateClick: async (isRecording) => {
              if (this.onOperateClick) {
                await this.onOperateClick(EZOperateButton.EZOperateButton_Record, isRecording)
              }
            }
          })
        }
      }
      .id("bottomview_operate_btns")
      .alignRules({
        center: { 'anchor': '__container__', align: VerticalAlign.Center },
        middle: { 'anchor': '__container__', align: HorizontalAlign.Center }
      })
    }.alignRules({
      top: { 'anchor': 'bottomview_toolbar', align: VerticalAlign.Bottom },
      bottom : { 'anchor': '__container__', align: VerticalAlign.Bottom }
    })
    .id("bottom_view")
    .width('100%')
  }
}

/**
 * 操控按钮
 */
export const enum EZOperateButton {
  EZOperateButton_PTZ,
  EZOperateButton_Talk,
  EZOperateButton_Capture,
  EZOperateButton_Record
}