import { YTAvoid } from "basic"

@ComponentV2
export struct _YtHeader {
  @Param isShowBackComp: boolean = true
  @Param @Require title: string
  @Param _h: Length = 54

  @BuilderParam rightComp: () => void
  @BuilderParam leftComp: () => void

  @Event _onBackPress: () => void = () => {  }
  @Event _onClickTitle: () => void = () => {}
  @Event _onClickRightComp: () => void = () => {}

  build() {
      RelativeContainer() {
        Row(){
          if(this.isShowBackComp) {
            Image($r('[basic].media.ic_back'))
              .width(24)
              .aspectRatio(1)
              .onClick(this._onBackPress)
          } else if(this.leftComp) {
            this.leftComp()
          } else {
            Text()
          }


          Row(){
            if(this.rightComp) {
              this.rightComp()
            }
          }
          .onClick(this._onClickRightComp)
        }
        .id('back_icon')
        .width("100%")
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.SpaceBetween)
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top},
          left: { anchor: "__container__", align: HorizontalAlign.Start}
        })

        Text(this.title)
          .fontSize(20)
          .fontWeight(500)
          .alignRules({
            center: { anchor: "back_icon", align: VerticalAlign.Center},
            middle: { anchor: "back_icon", align: HorizontalAlign.Center}
          })
          .onClick(this._onClickTitle)
      }
      .width("100%")
      .height(this._h)
      .padding({top: 12, bottom: 12})
  }
}