import { ContentDetailDTO, LiveRoomDataBean, LiveRoomItemBean } from 'wdBean/Index';
import { LiveViewModel } from '../viewModel/LiveViewModel';
import { TabComponent } from '../widgets/details/TabComponent';
import { TopPlayComponent } from '../widgets/details/video/TopPlayComponet';
import { DisplayDirection } from 'wdConstant/Index';
import mediaquery from '@ohos.mediaquery';
import { CustomToast, Logger, WindowModel } from 'wdKit/Index';
import { display, router, window } from '@kit.ArkUI';
import { WDAliPlayerController } from 'wdPlayer/Index';
import { LiveOperRowListView } from 'wdComponent';
import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel';
import { TrackConstants, TrackingContent, TrackParamConvert } from 'wdTracking/Index';
import { onlyWifiLoadVideo } from 'wdComponent/src/main/ets/utils/lazyloadImg';
import { LiveDetailChatRoomController } from '../im/LiveDetailChatRoomController';
import { LiveMessageOptType, LiveMessageRoomType } from 'wdBean/src/main/ets/bean/live/LiveRoomBean';
import { LiveDetailPageLogic } from '../viewModel/LiveDetailPageLogic';

let TAG: string = 'DetailPlayLivePage';

/**
 * 非沉浸式房间直播组件
 */
@Component
export struct DetailPlayLivePage {
  //横竖屏,默认竖屏
  @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL
  playerController: WDAliPlayerController = new WDAliPlayerController();
  liveViewModel: LiveViewModel = new LiveViewModel()
  @State relId: string = ''
  @State contentId: string = ''
  @State relType: string = ''
  @Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean
  @State tabs: string[] = []
  @State changeToTab: number = -1
  //监听屏幕横竖屏变化
  listener = mediaquery.matchMediaSync('(orientation: landscape)');
  @Consume @Watch('onPageShowCus') pageShow: number
  @Consume @Watch('onPageHideCus') pageHide: number
  @Consume @Watch('onBackPressCus') pageBackPress: number
  @Consume contentDetailData: ContentDetailDTO
  @Consume publishCommentModel: publishCommentModel
  // 尽量不要动属性。用来作为输入了评论之后，值传递
  @State lastInputedLiveComment: LiveRoomItemBean = {} as LiveRoomItemBean // 上次输入的直播间消息
  @State lastInputedChatComment: LiveRoomItemBean = {} as LiveRoomItemBean // 上次输入的大家聊消息
  @State lastLiveControl: LiveRoomItemBean = {} as LiveRoomItemBean // IM 控制消息
  // 顶部状态栏高度
  @Consume topSafeHeight: number
  chatRoomController: LiveDetailChatRoomController = new LiveDetailChatRoomController()
  @Provide banComment: boolean = true
  @State isEnd: boolean = false
  @Consume liveDetailPageLogic: LiveDetailPageLogic
  @State toastText: ResourceStr = "这是一个非Wi-Fi环境。请注意流量消耗"
  @State topPlayHeight:number = this.getTopPlayHeight()
  @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
  dialogToast: CustomDialogController = new CustomDialogController({
    builder: CustomToast({
      bgColor: 0xB3000000,
      opacityValue: 1,
      fontSizeValue: "25lpx",
      lineHeightValue: "36lpx",
      msg: this.toastText,
      marginTop:211/2+px2vp(this.topSafeHeight)-px2vp(84/2)
    }),
    autoCancel: false,
    alignment: DialogAlignment.Top,
    customStyle: true,
    maskColor: "#00000000"
  })

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

  async aboutToAppear(): Promise<void> {
    Logger.info(TAG, `wyj-aboutToAppear`)

    this.listener?.on("change", (mediaQueryResult) => {
      Logger.info(TAG, `change;${mediaQueryResult.matches}`)
      if (mediaQueryResult?.matches) {
        this.displayDirection = DisplayDirection.VIDEO_HORIZONTAL
      } else {
        this.displayDirection = DisplayDirection.VERTICAL
      }
      // WindowModel.shared.setMainWindowFullScreen(this.displayDirection == DisplayDirection.VIDEO_HORIZONTAL)
    })
    this.getLiveDetails()
    this.getLiveRoomData()

    if (this.liveDetailPageLogic.dealOrShowToast()) {
      if(!await onlyWifiLoadVideo()){
        this.showToastTip(this.toastText)
      }
    }

    this.configChatRoom()
  }

  async aboutToDisappear() {
    Logger.info(TAG, `wyj-aboutToDisappear`)
    await this.playerController?.stop()
    await this.playerController?.release()
    this.chatRoomController.disconnectLiveRoom()
  }

  configChatRoom() {
    this.chatRoomController.onHistoryMessage = (liveRoomItemBean: LiveRoomItemBean) => {
      const preDisplay = this.contentDetailData.liveInfo.preCommentFlag == 1
      if (this.liveViewModel.filterMySelfCommentNoPreDisplay(liveRoomItemBean, preDisplay)) {
        return
      }
      if (liveRoomItemBean.messageRoom == LiveMessageRoomType.living) {
        this.lastInputedLiveComment = liveRoomItemBean
      } else if (liveRoomItemBean.messageRoom == LiveMessageRoomType.chat) {
        this.lastInputedChatComment = liveRoomItemBean
      }
    }
    this.chatRoomController.onLiveMessage = (liveRoomItemBean: LiveRoomItemBean) => {
      switch (liveRoomItemBean.optionType) {
        case LiveMessageOptType.ZH_ROOM_NUMBER_MSG: {
          this.liveRoomDataBean.pv = Number(liveRoomItemBean.pv)
        } break
        case LiveMessageOptType.ZH_BARRAGE_SWITCH_MSG: {
          const openComment = liveRoomItemBean.data == "1"
          this.contentDetailData.liveInfo.openComment = openComment ? 1 : 0
        } break
        case LiveMessageOptType.ZH_PRE_DISPLAY_CHANGE: {
          const preCommentFlag = liveRoomItemBean.data == "1"
          this.contentDetailData.liveInfo.preCommentFlag = preCommentFlag ? 1 : 0
        } break
        case LiveMessageOptType.ZH_BARRAGE_BAN_MESSAGE:
        case LiveMessageOptType.ZH_BARRAGE_UNBAN_MESSAGE: {
          const banComment = liveRoomItemBean.data == "1"
          this.banComment = banComment
        } break
        case LiveMessageOptType.ZH_STOP_LIVE:
        case LiveMessageOptType.ZH_START_LIVE:
        case LiveMessageOptType.ZH_CHANGE_PAD: {  // 直播垫片控制
          this.lastLiveControl = liveRoomItemBean
        } break
        case LiveMessageOptType.ZH_REPLY_MSG: {
          this.lastInputedChatComment = liveRoomItemBean
        } break
        case LiveMessageOptType.ZH_UPDATE_MSG: {
          this.lastInputedLiveComment = liveRoomItemBean
        } break
        case LiveMessageOptType.ZH_DELETE_MSG: {
          this.lastInputedLiveComment = liveRoomItemBean
        } break
        case LiveMessageOptType.ZH_TOP_MSG: {
          this.lastInputedLiveComment = liveRoomItemBean
        } break
        case LiveMessageOptType.ZH_UN_TOP_MSG: {
          this.lastInputedLiveComment = liveRoomItemBean
        } break
        case LiveMessageOptType.ZH_WALL_MSG: {
          this.lastInputedLiveComment = liveRoomItemBean
        } break
        default: {
          Logger.warn(TAG, "暂未处理类型：" + liveRoomItemBean.optionType)
        } break
      }
    }
    this.chatRoomController.configDetail(this.contentDetailData)
  }

  build() {
    Column() {
      TopPlayComponent({ playerController: this.playerController, isEnd: this.isEnd, lastLiveControl: this.lastLiveControl })
        .height(this.displayDirection == DisplayDirection.VERTICAL ? this.topPlayHeight : '100%')
        .margin({
          top: this.displayDirection == DisplayDirection.VERTICAL ? px2vp(this.topSafeHeight) : 0
        })

      TabComponent({
        tabs: this.tabs,
        changeToTab: this.changeToTab,
        lastInputedLiveComment: this.lastInputedLiveComment,
        lastInputedChatComment: this.lastInputedChatComment
      })
        .layoutWeight(1)
        .visibility(this.displayDirection == DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None)

      LiveOperRowListView({
        operationButtonList: ['comment', 'collect', 'share', 'like'],
        styleType: 1,
        isLlive:this.displayDirection == DisplayDirection.VERTICAL,
        contentDetailData: this.contentDetailData,
        onCommentInputFocus: () => {
          //  切换到大家聊
          this.changeToTab = Math.random()
        },
        onCommentInputed: (content) => {
          if (content.comment) {
            this.liveViewModel.sendComment(content.comment, this.contentDetailData).then(result => {
              if (!result) {
                return
              }
              if (result.isWall == 1) {
                this.lastInputedLiveComment = result
              } else {
                this.lastInputedChatComment = result
              }
              // 发布评论埋点
              TrackingContent.commentClick(TrackConstants.PageName.Live_Detail,
                TrackConstants.PageName.Live_Detail,
                TrackParamConvert.contentDetail(this.contentDetailData));
            })
          }
        }
      }).visibility(this.displayDirection == DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None)


      // LiveCommentComponent({ heartNum: this.liveRoomDataBean.likeNum })
      //   .visibility(this.displayDirection == DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None)
    }
    .height('100%')
    .width('100%')
  }

  onPageShowCus(): void {
    Logger.info(TAG, `wyj-onPageShowCus`)
    // WindowModel.shared.setPreferredOrientation(window.Orientation.LOCKED);
  }

  onPageHideCus(): void {
    Logger.info(TAG, `wyj-onPageHideCus`)
    this.listener.off('change');
    // devicePLSensorManager.devicePLSensorOff();
  }

  onBackPressCus(): boolean | void {
    if (this.displayDirection == DisplayDirection.VERTICAL) {
      router.back()
    } else {
      this.displayDirection = DisplayDirection.VERTICAL
    }
    WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
    window.Orientation.PORTRAIT :
    window.Orientation.LANDSCAPE)
    // devicePLSensorManager.devicePLSensorOn(this.displayDirection == DisplayDirection.VERTICAL ?
    // window.Orientation.PORTRAIT :
    // window.Orientation.LANDSCAPE);
    return true
  }

  getLiveDetails() {
    const data = this.contentDetailData
    // console.error("XXXXZZZZ", 'contentDetailData   ----liveState==>' + data.liveInfo?.liveState)
    // console.error("XXXXZZZZ", 'contentDetailData   ----liveStyle==>' + data.liveInfo?.liveStyle)
    if (data.liveInfo?.liveState == 'wait') {
      //直播样式 0-正常模式 ， 1-隐藏直播间，2-隐藏大家聊 【人民号发布是竖屏的，为空】
      if (data.liveInfo?.liveStyle == 1) {
        this.tabs = ['简介', '大家聊']
      } else if (data.liveInfo?.liveStyle == 2) {
        this.tabs = ['简介', '直播间',]
      } else {
        this.tabs = ['简介', '直播间', '大家聊']
      }
    } else {
      if (data.liveInfo?.liveStyle == 1) {
        this.tabs = ['大家聊']
      } else if (data.liveInfo?.liveStyle == 2) {
        this.tabs = ['直播间',]
      } else {
        this.tabs = ['直播间', '大家聊']
      }
    }

  }

  getLiveRoomData() {
    this.liveViewModel.getLiveRoomData(this.contentId)
      .then(
        (data) => {
          this.liveRoomDataBean = data
        },
        () => {

        })
  }

  getTopPlayHeight() {
    let screenWidth = display.getDefaultDisplaySync().width
    return px2vp(screenWidth) * 9/16.0
  }

  currentChanged() {
    this.topPlayHeight = this.getTopPlayHeight()
  }

}