@Component
export struct YTButton {
  btHeight: number = 37
  btWidth: Length = '100%'
  btContent: string = ''
  btPadding: Length | Padding = 0
  btFontSize: number = 12
  bgc?: ResourceColor
  btFontColor: ResourceColor = Color.White
  btBorder?: BorderOptions
  btState: boolean = true
  btBorderRadius: Length | BorderRadiuses | LocalizedBorderRadiuses = 999
  btLinearGradient?: LinearGradientOptions
  btFontFamily?: ResourceStr
  btFontWeight?: string | number | FontWeight
  btShadow?: ShadowOptions | ShadowStyle
  @State private isClick: boolean = true
  click = () => {

  }

  @Styles
  pressStyles() {
    .opacity(0.9)
  }

  @Styles
  normalStyles() {
    .opacity(1)
  }

  aboutToAppear(): void {
    if (!this.bgc) {
      this.btLinearGradient = { angle: 92, colors: [['#FF4597F7', 0.023], ['#FF6B6DF7', 1.081]] }
    }
  }

  build() {
    Text(this.btContent)
      .fontSize(this.btFontSize)
      .fontColor(this.btFontColor)
      .backgroundColor(this.bgc)
      .height(this.btHeight)
      .width(this.btWidth)
      .textAlign(TextAlign.Center)
      .onClick(() => {
        this.isClick = false
        this.click()
        setTimeout(() => {
          this.isClick = true
        }, 1000)
      })
      .padding(this.btPadding ?? {})
      .border(this.btBorder)
      .shadow(this.btShadow)
      .enabled(this.btState ?? this.isClick)
      .borderRadius(this.btBorderRadius)
      .linearGradient(this.btLinearGradient)
      .fontFamily(this.btFontFamily)
      .fontWeight(this.btFontWeight)
      .stateStyles({
        pressed: this.pressStyles,
        normal: this.normalStyles
      })
  }
}