
@ComponentV2
export struct TitleBar {
  @Param title: string = '';
  @Param isDark: boolean = false;
  @Param showBack: boolean = true;
  @Param rightText: string = ''
  @Param rightColor: ResourceColor = Color.White
  @Param rightIcon?: Resource = undefined
  @Param onRightClick?: () => void = undefined

  @Param onBackClick?: () => void = undefined;

  build() {
    RelativeContainer() {
      Button({ type: ButtonType.Circle, stateEffect: true }) {
        Image(this.isDark ? $r('app.media.ic_back') : $r('app.media.ic_black_back')).width(24).height(24)
      }
      .width(40)
      .height(40)
      .margin({ left: 10 })
      .alignRules({
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        top: { anchor: '__container__', align: VerticalAlign.Top },
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
      })
      .onClick(() => {
        if (this.onBackClick) {
          this.onBackClick();
        } else {
          this.getUIContext().getRouter().back()
        }
      })
      .backgroundColor(Color.Transparent)
      .visibility(this.showBack ? Visibility.Visible : Visibility.Hidden)
      .id('btn_back')

      Text(this.title)
        .fontColor(this.isDark ? $r('app.color.color_90ffffff') : Color.Black)
        .fontSize(18)
        .fontWeight(FontWeight.Medium)
        .textAlign(TextAlign.Center)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .ellipsisMode(EllipsisMode.END)
        .margin({right: 50})
        .alignRules({
          left: { anchor: 'btn_back', align: HorizontalAlign.End },
          top: { anchor: '__container__', align: VerticalAlign.Top },
          right: { anchor: '__container__', align: HorizontalAlign.End },
          bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
        })
        .width('auto')

      Row() {
        if (this.rightIcon) {
          Image(this.rightIcon).width(18).height(18)
        }
        Text(this.rightText).width('auto').fontSize(14).fontColor(this.rightColor)
      }
      .margin({right: 16})
      .alignRules({
        top: { anchor: '__container__', align: VerticalAlign.Top },
        right: { anchor: '__container__', align: HorizontalAlign.End },
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
      })
      .onClick(() => {
        if (this.onRightClick) {
          this.onRightClick()
        }
      })
    }
    .padding({top: 50})
    .width('100%')
    .height(100)
  }
}