import { router } from '@kit.ArkUI'

@Builder
function defaultBuilder(): void {

}

@Component
export struct HdNav {
  @StorageProp('topHeight')
  topHeight: number = 0
  @Prop
  title: string = ''
  @Prop
  textColor: ResourceStr = $r('app.color.top_title')
  @Prop
  bgColor: ResourceStr = $r('app.color.top_bg')
  @Prop
  hasBorder: boolean = false
  @Prop
  leftIcon: ResourceStr = $r('app.media.top_back')
  @Prop
  rightIcon: ResourceStr = $r('sys.media.ohos_ic_public_more')
  @Prop
  showRightIcon: boolean = true
  @Prop
  showLeftIcon: boolean = true
  @Prop
  showRightText: boolean = false
  @Prop
  rightText: string = ''
  @BuilderParam
  titleBuilder: () => void = defaultBuilder
  @BuilderParam
  menuBuilder: () => void = defaultBuilder

  build() {
    Row({ space: 16 }) {
      if (this.showLeftIcon) {
        Image(this.leftIcon)
          .size({ width: 24, height: 24 })
          .margin({left:-5})
          .onClick(() => router.back())
          .fillColor($r('app.color.black'))
      }
      else {
        Blank()
          .width(24)
      }
      Row() {
        if (this.title) {
          Text(this.title)
            .fontWeight(600)
            .layoutWeight(1)
            .textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor(this.textColor)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
        } else if (this.titleBuilder) {
          this.titleBuilder()
        }
      }
      .height(56)
      .layoutWeight(1)

      if (this.showRightIcon) {
        Image(this.rightIcon)
          .size({ width: 24, height: 24 })
          .objectFit(ImageFit.Contain)
          .bindMenu(this.menuBuilder)
      } else  if (this.showRightText)
      {
        Text(this.rightText)
          .fontSize(16)
          .fontColor(this.textColor)
          .margin({right:10})
      }
      else {
        Blank()
          .width(24)
      }
    }
    .padding({ left: 16, right: 16, top: this.topHeight })
    .height(56 + this.topHeight)
    .width('100%')
    .backgroundColor(this.bgColor)

  }
}