import font from '@ohos.font'
import { LiveDetailsBean } from 'wdBean/Index'
import { DateTimeUtils, StringUtils } from 'wdKit/Index'

@Component
export struct LiveCountdownComponent {
  @Consume @Watch('calculateDataStatus') liveDetailsBean: LiveDetailsBean
  textTimerController: TextTimerController = new TextTimerController()
  @State format: string = 'HH:mm:ss'
  @State month: string = ''
  @State day: string = ''
  @State hour: string = ''
  @State minute: string = ''
  @State differenceTimeStamp: number = 0
  @State isCountDownStart: boolean = false

  aboutToAppear(): void {
    //注册字体
    font.registerFont({
      familyName: 'BebasNeue_Regular',
      familySrc: $rawfile('font/BebasNeue_Regular.otf')
    })
    setTimeout(() => {
      this.textTimerController.start()
    }, 2000)
  }

  build() {
    Column() {
      this.showTitle()
      this.showCountDown()
      this.showAppointment()
    }.padding({
      top: 20,
      left: 20,
      right: 20,
      bottom: 24
    })
    .backgroundColor(Color.White)
    .border({ radius: 6 })
    .margin({ top: 16 })
  }

  aboutToDisappear(): void {
    this.textTimerController.pause()
  }

  @Builder
  showTitle() {
    Text(this.isCountDownStart ? '距离直播开始还有' : '直播开始时间')
      .maxLines(2)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .fontSize('14fp')
      .fontWeight(400)
      .fontColor('#222222')
  }

  @Builder
  showCountDown() {
    Row() {
      Text(this.month)
        .showTimeStyleBold()
      Text('月')
        .showTimeStyleNormal()
        .margin({ left: 3 })
      Text(this.day)
        .showTimeStyleBold()
        .margin({ left: 3 })
      Text('日')
        .showTimeStyleNormal()
        .margin({ left: 3 })
      Text(this.hour)
        .showTimeStyleBold()
        .margin({ left: 10 })
      Text(':')
        .showTimeStyleBold()
      Text(this.minute)
        .showTimeStyleBold()
    }
    .margin({ top: 10 })
    .visibility(this.isCountDownStart ? Visibility.None : Visibility.Visible
    )

    TextTimer({ isCountDown: true, count: this.differenceTimeStamp, controller: this.textTimerController })
      .format(this.format)
      .fontSize('40fp')
      .fontWeight(FontWeight.Bold)
      .fontColor('#222222')
      .fontFamily('BebasNeue_Regular')
      .onTimer((utc: number, elapsedTime: number) => {
        console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime)
      })
      .margin({ top: 10 })
      .visibility(this.isCountDownStart ? Visibility.Visible : Visibility.None)
  }

  @Builder
  showAppointment() {
    Text('我要预约')
      .width('100%')
      .height(42)
      .textAlign(TextAlign.Center)
      .fontSize('16fp')
      .fontWeight(400)
      .fontColor(Color.White)
      .margin({
        top: 16
      })
      .border({ radius: 4 })
      .backgroundColor('#ED2800')
    // .backgroundColor('#CCCCCC')
  }

  calculateDataStatus() {
    let startTimeStamp: number = DateTimeUtils.getDateTimestamp(this.liveDetailsBean.liveInfo.planStartTime)
    let currentTimeStamp: number = DateTimeUtils.getTimeStamp()
    let _differenceTimeStampTmp = startTimeStamp - currentTimeStamp
    this.isCountDownStart = _differenceTimeStampTmp <= 4 * 60 * 60 * 1000
    if (this.isCountDownStart) {
      this.differenceTimeStamp = _differenceTimeStampTmp
      return
    }
    //2024-04-01 19:44:00-trim->2024-04-0119:44:00
    if (StringUtils.isNotEmpty(this.liveDetailsBean.liveInfo.planStartTime)) {
      let playStartTimeTmp = this.liveDetailsBean.liveInfo.planStartTime.trim()
      this.month = playStartTimeTmp.substring(5, 7)
      this.day = playStartTimeTmp.substring(8, 10)
      this.hour = playStartTimeTmp.substring(11, 13)
      this.minute = playStartTimeTmp.substring(14, 16)
    }
  }
}

@Extend(Text)
function showTimeStyleNormal() {
  .fontSize('16fp')
  .fontWeight(500)
  .fontColor('#222222')
}

@Extend(Text)
function showTimeStyleBold() {
  .fontSize('40fp')
  .fontFamily('BebasNeue_Regular')
  .fontWeight(FontWeight.Bold)
  .fontColor('#222222')
}