/*
 * 控制台按钮
 * EZOpenSDK
 *
 * Created by junecheng on 2024/5/20.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
@Component
export default struct OperateButton {
  // 操作按钮名称
  @Prop operateName: ResourceStr
  // 是否支持
  @Prop isSupport: boolean
  // 图标图片
  @Prop currentImage: Resource
  // 普通状态图片 / 禁用状态图片
  @Prop normalImage: Resource
  // 高亮状态图片
  @Prop selectImage: Resource
  // 点击事件，录像时回调状态，其他按钮不回调参数
  onOperateClick?: (isRecording?: boolean) => void
  // 是否是录制按钮
  @Prop isRecordButton?: boolean
  // 是否在录制中
  @Prop isLocalRecording?: boolean

  build() {
    Column() {
      Image(this.currentImage)
        .width(65)
        .height(65)
        .onTouch((event: TouchEvent) => {
          if (this.isSupport && !this.isRecordButton) {
            if (event.type == TouchType.Down) {
              this.currentImage = this.selectImage
            } else if (event.type == TouchType.Up) {
              this.currentImage = this.normalImage
            }
          }
        })
        .enabled(this.isSupport)
        .onClick(() => {
          if (this.isRecordButton) {
            this.isLocalRecording = !this.isLocalRecording
            this.currentImage = this.isLocalRecording ? this.selectImage : this.normalImage
          }
          if (this.onOperateClick) {
            if (this.isRecordButton) {
              this.onOperateClick(this.isLocalRecording)
            } else {
              this.onOperateClick()
            }
          }
        })
      Text(this.operateName).fontSize(14).fontColor(Color.Gray).margin({ top: 7 })
    }.visibility(this.operateName ? Visibility.Visible : Visibility.Hidden)
  }
}