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 { WDAliPlayerController, 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: WDAliPlayerController = new WDAliPlayerController();
  private swiperController: SwiperController = new SwiperController()
  @Provide bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
  @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean
  @Provide isShowControl: boolean = false
  @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL //横竖屏,默认竖屏
  @Consume liveState: string
  @Consume liveStyle: number
  @Consume playUrl: string
  @Consume imgUrl: string
  @Consume @Watch('openFullScreen') pageShow: number
  @Consume @Watch('closeFullScreen') pageHide: number
  @Consume contentId: string
  @Consume liveDetailsBean: LiveDetailsBean
  @State swiperIndex: number = 1

  aboutToAppear(): void {
    this.openFullScreen()
    this.getLiveRoomData()

  }

  aboutToDisappear(): void {
    this.closeFullScreen()
  }

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

  closeFullScreen() {
    console.log(TAG, 'closeFullScreen')
    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)
          .position({ x: '100%', y: '100%' })
          .markAnchor({ x: 56, y: 56 })
          .onClick(() => {
            this.swiperController.showNext()
          })
      }
    }
    .height('100%')
    .width('100%')

  }

  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)
        })
  }
}