import { ContentDetailDTO, LiveRoomDataBean } from 'wdBean/Index';
import { LiveViewModel } from '../viewModel/LiveViewModel';
import { CustomToast, 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';
import { onlyWifiLoadVideo } from 'wdComponent/src/main/ets/utils/lazyloadImg';
import { StringUtils } from 'wdKit';
import { LiveDetailChatRoomController } from '../im/LiveDetailChatRoomController';

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()
  @Consume contentDetailData: ContentDetailDTO
  @Consume bottomSafeHeight: number
  @Consume topSafeHeight: number
  @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
  //播放错误
  @State isPlayerError: boolean = false
  @State isCanplay: boolean = false
  @State toastText: ResourceStr = "这是一个非Wi-Fi环境。请注意流量消耗"
  chatRoomController: LiveDetailChatRoomController = new LiveDetailChatRoomController()

  dialogToast: CustomDialogController = new CustomDialogController({
    builder: CustomToast({
      bgColor: 0xB3000000,
      opacityValue: 1,
      fontSizeValue: "25lpx",
      lineHeightValue: "36lpx",
      msg: this.toastText,
    }),
    autoCancel: false,
    alignment: DialogAlignment.Center,
    customStyle: true,
    maskColor: "#00000000"
  })

  showToastTip(msg: ResourceStr) {
    this.toastText = msg
    this.dialogToast.open()
  }

  async aboutToAppear(): Promise<void> {
    this.openFullScreen()
    this.getLiveRoomData()
    if(!await onlyWifiLoadVideo()){
      this.showToastTip(this.toastText)
    }
    this.chatRoomController.configDetail(this.contentDetailData)
  }

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

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

  closeFullScreen() {
    console.log(TAG, 'closeFullScreen')
  //  WindowModel.shared.setWindowLayoutFullScreen(false)
  //  WindowModel.shared.setSpecificSystemBarEnabled(true)
 //   WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
  }

  build() {

    Stack({ alignContent: Alignment.Top }) {
      // 直播背景图，模糊处理
      Image(this.liveDetailPageLogic.imgUrl)
        .height('100%')
        .width('100%')
        .blur(100)
        .renderFit(RenderFit.RESIZE_COVER)
      // 直播结束且无回看
      if (this.liveState === 'end' && StringUtils.isEmpty(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, isPlayerError: this.isPlayerError, isCanplay: this.isCanplay
            })
          }
        }

        // 直播详情  左右滑动业务数据
        PlayerInfoComponent({
          playerController: this.playerController,
          swiperController: this.swiperController,
          swiperIndex: $swiperIndex,
        })

        // 直播资源加载失败
        Column() {
          Text('直播加载中，请稍候重试')
            .fontSize('20fp')
            .fontWeight(500)
            .margin({ top: 16 })
            .fontColor(Color.White)

          Button('点击重试')
            .type(ButtonType.Normal)
            .width(80)
            .height(28)
            .backgroundColor(Color.Transparent)
            .fontColor('#ffcccccc')
            .border({ width: 1 })
            .borderColor('#4dffffff')
            .borderRadius(4)
            .fontSize($r('app.float.font_size_12'))
            .margin({ top: 16 })
            .padding(0)
            .onClick(() => {

              this.isCanplay = false
              this.isPlayerError = false
              this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, {
                'contentType': `${this.contentDetailData.newsType}`,
                'contentId': `${this.contentDetailData.newsId}`,
                'contentName': `${this.contentDetailData.newsTitle || ''}`,
              });
            })
        }
        .width('100%')
        .margin({ top: 195 })
        .justifyContent(FlexAlign.Center)
        .visibility(this.isPlayerError ? Visibility.Visible :
        Visibility.None)

        // 清屏按钮
        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)
        })
  }
}