/*
 * 云台控制视图
 * EZOpenSDK
 *
 * Created by junecheng on 2024/5/14.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
import { EZPTZCommand } from '@ohos/EZOpenSDK'

@Component
export default struct PTZView {
  onPTZCloseClick?: () => void
  onTouchDown?: (command: EZPTZCommand) => void
  onTouchUp?: (command: EZPTZCommand) => void
  // 云台view背景
  @State private PtzViewBg: Resource = $r('app.media.ptz_bg')
  // 云台view显示状态
  @Link isPtzViewShow?: boolean
  // 触发长按的最短时间，单位为毫秒（ms）
  longPressDuration: number = 30

  build() {
    RelativeContainer() {
      Image($r("app.media.play_close"))
        .width(50)
        .height(50)
        .id("bottomview_pts_view_close")
        .alignRules({
          top: { 'anchor': '__container__', align: VerticalAlign.Top },
          right: { 'anchor': '__container__', align: HorizontalAlign.End }
        })
        .onClick(() => {
          // 隐藏云台View
          this.isPtzViewShow = false
          if (this.onPTZCloseClick) {
            this.onPTZCloseClick()
          }
        })
      Image(this.PtzViewBg).width(184).height(184)
        .id("bottomview_pts_view_operate")
        .alignRules({
          center: { 'anchor': '__container__', align: VerticalAlign.Center },
          middle: { 'anchor': '__container__', align: HorizontalAlign.Center }
        })
      // 上
      Column()
        .width(70)
        .height(50)
        .id("bottomview_pts_operate_up")
        .alignRules({
          top: { 'anchor': 'bottomview_pts_view_operate', align: VerticalAlign.Top },
          middle: { 'anchor': 'bottomview_pts_view_operate', align: HorizontalAlign.Center }
        })
        .onTouch((event: TouchEvent) => {
          if (event.type == TouchType.Down) {
            this.PtzViewBg = $r('app.media.ptz_up_sel')
            if (this.onTouchDown) {
              this.onTouchDown(EZPTZCommand.EZPTZCommandUp)
            }
          } else if (event.type == TouchType.Up) {
            this.PtzViewBg = $r('app.media.ptz_bg')
            if (this.onTouchUp) {
              this.onTouchUp(EZPTZCommand.EZPTZCommandUp)
            }
          }
        })
      // 左
      Column()
        .width(50)
        .height(70)
        .id("bottomview_pts_operate_left")
        .alignRules({
          left: { 'anchor': 'bottomview_pts_view_operate', align: HorizontalAlign.Start },
          center: { 'anchor': 'bottomview_pts_view_operate', align: VerticalAlign.Center }
        })
        .onTouch((event: TouchEvent) => {
          if (event.type == TouchType.Down) {
            this.PtzViewBg = $r('app.media.ptz_left_sel')
            if (this.onTouchDown) {
              this.onTouchDown(EZPTZCommand.EZPTZCommandLeft)
            }
          } else if (event.type == TouchType.Up) {
            this.PtzViewBg = $r('app.media.ptz_bg')
            if (this.onTouchUp) {
              this.onTouchUp(EZPTZCommand.EZPTZCommandLeft)
            }
          }
        })
      // 下
      Column()
        .width(70)
        .height(50)
        .id("bottomview_pts_operate_bottom")
        .alignRules({
          bottom: { 'anchor': 'bottomview_pts_view_operate', align: VerticalAlign.Bottom },
          middle: { 'anchor': 'bottomview_pts_view_operate', align: HorizontalAlign.Center }
        })
        .onTouch((event: TouchEvent) => {
          if (event.type == TouchType.Down) {
            this.PtzViewBg = $r('app.media.ptz_bottom_sel')
            if (this.onTouchDown) {
              this.onTouchDown(EZPTZCommand.EZPTZCommandDown)
            }
          } else if (event.type == TouchType.Up) {
            this.PtzViewBg = $r('app.media.ptz_bg')
            if (this.onTouchUp) {
              this.onTouchUp(EZPTZCommand.EZPTZCommandDown)
            }
          }
        })
      // 右
      Column()
        .width(50)
        .height(70)
        .id("bottomview_pts_operate_right")
        .alignRules({
          right: { 'anchor': 'bottomview_pts_view_operate', align: HorizontalAlign.End },
          center: { 'anchor': 'bottomview_pts_view_operate', align: VerticalAlign.Center }
        })
        .onTouch((event: TouchEvent) => {
          if (event.type == TouchType.Down) {
            this.PtzViewBg = $r('app.media.ptz_right_sel')
            if (this.onTouchDown) {
              this.onTouchDown(EZPTZCommand.EZPTZCommandRight)
            }
          } else if (event.type == TouchType.Up) {
            this.PtzViewBg = $r('app.media.ptz_bg')
            if (this.onTouchUp) {
              this.onTouchUp(EZPTZCommand.EZPTZCommandRight)
            }
          }
        })
    }
    .backgroundColor(Color.White)
    .width('100%')
    .alignRules({
      bottom: { 'anchor': 'bottom_view', align: VerticalAlign.Bottom },
      top: { 'anchor': 'bottomview_toolbar', align: VerticalAlign.Bottom }
    })
    .id("bottomview_pts_view")
    .visibility(this.isPtzViewShow ? Visibility.Visible : Visibility.Hidden)
  }
}