import { LiveRoomDataBean } from 'wdBean/Index';
import { LiveViewModel } from '../viewModel/LiveViewModel';
import { WindowModel } from 'wdKit/Index';
import { PlayerComponent } from '../widgets/vertical/PlayerComponent';
import { PlayerInfoComponent } from '../widgets/vertical/PlayerInfoComponent';
import { WDAliPlayerController } from 'wdPlayer/Index';
import { DisplayDirection } from 'wdConstant/Index';
import { LiveEmptyComponent, WDLiveViewDefaultType } from 'wdComponent/Index';
import { PlayerEndView } from '../widgets/vertical/PlayerEndView';
import { TrackConstants, TrackingButton } from 'wdTracking/Index';
import { LiveDetailPageLogic } from '../viewModel/LiveDetailPageLogic';

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
  @State swiperIndex: number = 1
  @Consume liveDetailPageLogic: LiveDetailPageLogic

  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({ alignContent: Alignment.Top }) {
      // 直播背景图，模糊处理
      Image(this.liveDetailPageLogic.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('40%').margin({top:this.topSafeHeight })
        } else {

          if (this.liveDetailPageLogic.showPad) {
            // 有垫片
            if(this.liveDetailPageLogic.padImageUri.length > 0){
              // 配置了垫片资源
              Image(this.liveDetailPageLogic.padImageUri).objectFit(ImageFit.Fill).width('100%').height('100%')

            }else {
               // 没有配置垫片资源
              LiveEmptyComponent({
                emptyType: WDLiveViewDefaultType.WDViewDefaultType_NoLiveSuspend
              })
                .height('40%').margin({top:this.topSafeHeight })
            }


          } 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: this.bottomSafeHeight })
          .onClick(() => {
            this.swiperController.showNext()
            // 埋点
            TrackingButton.click('clearScreen', TrackConstants.PageName.Live_Detail,
              TrackConstants.PageName.Live_Detail)
          })

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