/*
 * 回放页面导航栏
 * EZOpenSDK
 *
 * Created by junecheng on 2024/4/14.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
import { router } from '@kit.ArkUI'

@Preview
@Component
export default struct EZPlaybackNavView {
  @Link title: string | Resource
  @Prop rightNavTitle?: string | Resource
  @Prop isRightNavShow?: boolean
  showLeftBtn?: boolean = true
  showBackText?: boolean = true
  onLeftNavClick?: () => void
  onRightNavClick?: () => void
  onDateClick?: () => void

  build() {
    Column() {
      Stack() {
        Row() {
          this.navBarLeft()
          this.navBarRight()
        }.width('100%').height($r('app.float.navbar_height'))
        .backgroundColor(Color.White)
        .justifyContent(FlexAlign.SpaceBetween)

        this.navBarTitle()
      }

      Divider()
    }
  }

  @Builder
  navBarLeft() {
    Row() {
      if (this.showLeftBtn) {
        Image($r('app.media.nav_back')).width(20).height(20).colorFilter(Color.Blue)
        if (this.showBackText) {
          Text($r('app.string.back'))
            .fontSize(16)
            .fontColor($r('app.color.ez_text_blue'))
        }
      }
    }.onClick(() => {
      if (this.onLeftNavClick) {
        this.onLeftNavClick()
      } else {
        router.back()
      }
    })
  }

  @Builder
  navBarRight() {
    Row() {
      if (this.isRightNavShow) {
        // Text(this.rightNavTitle)
        //   .fontSize(16)
        //   .fontColor($r('app.color.ez_text_blue'))
        //   .margin(16)
        Image($r('app.media.ic_recordtype')).width(23).height(23).colorFilter(Color.Black).margin({ right: 10 })
      }
    }.onClick(() => {
      if (this.onRightNavClick) {
        this.onRightNavClick()
      }
    })
  }

  @Builder
  navBarTitle() {
    Row() {
      Text(this.title)
        .fontWeight(FontWeight.Medium)
        .fontSize(18)
        .fontColor(Color.Black)
      Text('▽').width(20).height(20).fontSize(18).margin({ left: 5 })
    }.justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center).onClick(() => {
      if (this.onDateClick) {
        this.onDateClick()
      }
    })
  }
}