import { YTAvoid } from '../../utils/YTAvoid'
import { yTRouter } from '../../utils/YTRouter'

@Component
export struct YTHeader {
  @BuilderParam leftComp?: () => void
  @BuilderParam rightComp?: () => void
  @BuilderParam centerComp?: () => void
  @StorageProp(YTAvoid.SAFE_TOP_KEY) safeTop: number = 0
  backArrow: boolean = true
  title: string = ''
  bgc: ResourceColor = Color.Transparent
  click = () => {
    yTRouter.routerBack()
  }

  build() {
    Stack() {
      Row() {
        if (this.backArrow && !this.leftComp) {
          Image($r('app.media.ic_back'))
            .width(24)
            .margin({ left: 16 })
            .onClick(this.click)
        }
        if (this.leftComp) {
          this.leftComp()
        }

        if (this.rightComp) {
          this.rightComp()
        }
      }
      .width('100%')
      .justifyContent(this.rightComp ? FlexAlign.SpaceBetween : FlexAlign.Start)


      Row() {
        if (this.centerComp) {
          this.centerComp()
        }
        if (this.title && !this.centerComp) {
          Text(this.title)
            .fontSize(18)
            .fontWeight(700)
            .fontColor(Color.Black)
        }
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .hitTestBehavior(HitTestMode.None)
    }
    .height(44 + this.safeTop)
    .padding({ top: this.safeTop })
    .backgroundColor(this.bgc)

  }
}