import font from '@ohos.font'
import { LiveDetailsBean } from 'wdBean/Index'
import { DateTimeUtils, StringUtils } from 'wdKit/Index'
import { LiveViewModel } from '../../viewModel/LiveViewModel'
import { HttpUtils } from 'wdNetwork/Index'
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'

@Component
export struct LiveCountdownComponent {
  @State liveDetailsBean: LiveDetailsBean = {} as 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
  //是否预约过直播
  @State isAppointmentLive: boolean = false
  liveViewModel: LiveViewModel = new LiveViewModel()

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

  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(this.isAppointmentLive ? '取消预约' : '我要预约')
      .width('100%')
      .height(42)
      .textAlign(TextAlign.Center)
      .fontSize('16fp')
      .fontWeight(400)
      .fontColor(Color.White)
      .margin({
        top: 16
      })
      .border({ radius: 4 })
      .backgroundColor(this.isAppointmentLive ? '#CCCCCC' : '#ED2800')
      .onClick(() => {
        if (!HttpUtils.getUserId()) {
          WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
          return
        }
        if (this.liveDetailsBean && this.liveDetailsBean.liveInfo) {
          this.liveAppointment()
        }
      })
  }

  updateData() {
    this.getLiveAppointmentStatus()
    let startTimeStamp: number = DateTimeUtils.getDateTimestamp(this.liveDetailsBean.liveInfo?.planStartTime)
    let currentTimeStamp: number = DateTimeUtils.getTimeStamp()
    let _differenceTimeStampTmp = startTimeStamp - currentTimeStamp
    this.isCountDownStart = _differenceTimeStampTmp <= 0 ? false : _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)
    }
  }

  getLiveAppointmentStatus() {
    this.liveViewModel.getLiveAppointmentStatus(
      this.liveDetailsBean.reLInfo ? this.liveDetailsBean.reLInfo.relId : '',
      this.liveDetailsBean.newsId
    ).then(
      (data) => {
        this.isAppointmentLive = data
      },
      () => {

      })
  }

  liveAppointment() {
    this.liveViewModel.liveAppointment(
      this.liveDetailsBean.reLInfo ? this.liveDetailsBean.reLInfo.relId : '',
      this.liveDetailsBean.newsId,
      !this.isAppointmentLive).then(
      (data) => {
        if (data.success) {
          this.isAppointmentLive = !this.isAppointmentLive
        }
      },
      () => {

      })
  }
}

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

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