import { Action, LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index';
import { LiveViewModel } from '../viewModel/LiveViewModel';
import router from '@ohos.router';
import { WindowModel } from 'wdKit/Index';
import { PlayerComponent } from '../widgets/vertical/PlayerComponent';
import { PlayerInfoComponent } from '../widgets/vertical/PlayerInfoComponent';
import { WDPlayerController } from 'wdPlayer/Index';
import { DisplayDirection } from 'wdConstant/Index';
import { LiveEmptyComponent, WDLiveViewDefaultType } from 'wdComponent/Index';
import { PlayerEndView } from '../widgets/vertical/PlayerEndView';

const storage = LocalStorage.getShared();
const TAG = 'DetailPlayVLivePage'

@Entry(storage)
@Component
export struct DetailPlayVLivePage {
  private liveViewModel: LiveViewModel = new LiveViewModel()
  private playerController: WDPlayerController = new WDPlayerController();
  private swiperController: SwiperController = new SwiperController()
  @Provide bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
  @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @Provide liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean
  @Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean
  @Provide isShowControl: boolean = false
  @Provide liveState: string = ''
  @Provide playUrl: string = ''
  @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL //横竖屏,默认竖屏
  @State relId: string = ''
  @State contentId: string = ''
  @State relType: string = ''
  @State swiperIndex: number = 1
  @State imgUrl: string = ''

  aboutToAppear(): void {
    console.log(TAG, 'aboutToAppear')
    WindowModel.shared.setWindowLayoutFullScreen(true)
    WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff', })

    //https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/content/zh/c/content/detail?relId=500005302448&relType=1&contentId=20000016340
    let par: Action = router.getParams() as Action;
    let params = par?.params;
    this.relId = params?.extra?.relId || '';
    this.relType = params?.extra?.relType || '';
    this.contentId = params?.contentID || '';
    this.getLiveDetails()
    this.getLiveRoomData()
  }

  aboutToDisappear(): void {
    WindowModel.shared.setWindowLayoutFullScreen(false)
    WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
  }

  build() {

    Stack() {
      Image(this.imgUrl)
        .height('100%')
        .width('100%')
        .blur(100)
        .renderFit(RenderFit.RESIZE_COVER)
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
      // 直播结束且无回看
      if (this.liveState === 'end' && !this.playUrl) {
        PlayerEndView()
      } else {
        // 直播暂停，仍然可以评论
        if (this.liveState === 'pause') {
          LiveEmptyComponent({
            emptyType: WDLiveViewDefaultType.WDViewDefaultType_NoLiveSuspend
          })
            .height('60%')
        } else {
          PlayerComponent({
            playerController: this.playerController
          })
        }
        PlayerInfoComponent({
          playerController: this.playerController,
          swiperController: this.swiperController,
          swiperIndex: $swiperIndex
        })

        Image($r('app.media.icon_live_more'))
          .width(40)
          .aspectRatio(1)
          .visibility(this.swiperIndex === 0 ? Visibility.Visible : Visibility.Hidden)
          .animation({ duration: 500 })
          .position({ x: '100%', y: '100%' })
          .markAnchor({ x: 56, y: 56 })
          .onClick(() => {
            this.swiperController.showNext()
          })
      }


    }
    .height('100%')
    .width('100%')

  }

  getLiveDetails() {
    this.liveViewModel.getLiveDetails(this.contentId, this.relId, this.relType)
      .then(
        (data) => {
          if (data.length > 0) {
            this.liveDetailsBean = data[0]
            this.liveState = this.liveDetailsBean.liveInfo?.liveState //直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
            if (this.liveDetailsBean.fullColumnImgUrls && this.liveDetailsBean.fullColumnImgUrls.length > 0) {
              this.imgUrl = this.liveDetailsBean.fullColumnImgUrls[0].url
            }

            if (this.liveDetailsBean.liveInfo.liveState == 'end') {
              this.playUrl = this.liveDetailsBean.liveInfo.vlive[0].replayUri
            }
            console.log(TAG, 'getLiveDetails', JSON.stringify((this.liveDetailsBean)))
          }
        },
        (message: string) => {
          console.error(TAG, 'getLiveDetails catch', message)
        })
  }

  getLiveRoomData() {
    this.liveViewModel.getLiveRoomData(this.contentId)
      .then(
        (data) => {
          this.liveRoomDataBean = data
          console.log(TAG, 'getLiveRoomData', JSON.stringify((this.liveRoomDataBean)))
        },
        (message: string) => {
          console.error(TAG, 'getLiveDetails catch', message)
        })
  }
}