import { Action, ContentDetailDTO, LiveDetailsBean, LiveRoomDataBean, LiveRoomItemBean } from 'wdBean/Index'
import { LiveCommentComponent } from 'wdComponent/Index'
import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel'
import { OperRowListView } from 'wdComponent/src/main/ets/components/view/OperRowListView'
import PageModel from 'wdComponent/src/main/ets/viewmodel/PageModel'
import { DisplayDirection, ViewType } from 'wdConstant/Index'
import { ContentDetailRequest } from 'wdDetailPlayApi/Index'
import { ResponseDTO } from 'wdNetwork/Index'
import { LiveViewModel } from '../../viewModel/LiveViewModel'
import { ChartItemCompereComponent } from './ChartItemCompereComponent'
import { ChatItemComponent } from './ChartItemComponent'
import { router } from '@kit.ArkUI'

const TAG = "PlayerCommentComponent"

@Component
export struct PlayerCommentComponent {
  liveViewModel: LiveViewModel = new LiveViewModel()
  @Consume @Watch('liveDetailsBeanChange') liveDetailsBean: LiveDetailsBean
  @Consume liveRoomDataBean: LiveRoomDataBean
  @Consume displayDirection: DisplayDirection
  @State private pageModel: PageModel = new PageModel()
  @State liveChatList: Array<LiveRoomItemBean> = []
  @State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
  @State publishCommentModel: publishCommentModel = new publishCommentModel()
  @State contentId: string = ''
  @State relId: string = ''
  @State relType: string = ''
  scroller: Scroller = new Scroller()

  aboutToAppear(): void {
    this.getLiveChatList()
    const action: Action = router.getParams() as Action
    if (action) {
      this.contentId = action.params?.contentID || ''
      if (action.params && action.params.extra) {
        this.relId = action.params.extra.relId || ''
        this.relType = action.params.extra.relType || ''
      }
      this.getContentDetail(this.contentId, this.relId, this.relType)
    }

  }

  liveDetailsBeanChange() {
    this.getLiveChatList()
  }

  getLiveChatList() {
    this.pageModel.currentPage = 1
    this.liveViewModel.getLiveChatList(
      1,
      this.liveDetailsBean?.liveInfo?.mlive?.mliveId,
      this.liveDetailsBean?.newsId,
      20,)
      .then(
        (data) => {
          if (data.barrageResponses && data.barrageResponses.length > 0) {

            this.pageModel.viewType = ViewType.LOADED;
            this.liveChatList.push(...data.barrageResponses)
            console.log('liveChatList===', this.liveChatList)
            if (data.barrageResponses.length === this.pageModel.pageSize) {
              this.pageModel.currentPage++;
              this.pageModel.hasMore = true;
            } else {
              this.pageModel.hasMore = false;
            }

            setTimeout(() => {
              this.scroller.scrollEdge(Edge.Bottom)
            }, 500)
          } else {
            this.pageModel.viewType = ViewType.EMPTY;
          }
        },
        () => {

        })
  }

  async getContentDetail(contentId: string, relId: string, relType: string) {
    await ContentDetailRequest.getContentDetail({
      contentId: contentId,
      relId: relId,
      relType: relType
    }).then(async (resDTO: ResponseDTO<ContentDetailDTO[]>) => {
      console.log(TAG, 'getContentDetail:', JSON.stringify(resDTO.data))
      if (resDTO.data) {

        this.contentDetailData = resDTO.data?.[0];

        if (this.contentDetailData?.openComment) {
          this.publishCommentModel.targetId = String(this.contentDetailData?.newsId || '')
          this.publishCommentModel.targetRelId = String(this.contentDetailData?.reLInfo?.relId)
          this.publishCommentModel.targetTitle = this.contentDetailData?.newsTitle
          this.publishCommentModel.targetRelType = String(this.contentDetailData?.reLInfo?.relType)
          this.publishCommentModel.targetRelObjectId = String(this.contentDetailData?.reLInfo?.relObjectId)
          this.publishCommentModel.keyArticle = String(this.contentDetailData?.keyArticle)
          this.publishCommentModel.targetType = String(this.contentDetailData?.newsType)
        }


      }
    })
  }

  build() {
    Column() {
      List({ scroller: this.scroller }) {
        // 主持人
        if (this.liveDetailsBean.oldNewsId) {
          ChartItemCompereComponent()
        }
        ForEach(this.liveChatList, (item: LiveRoomItemBean) => {
          ListItem() {
            ChatItemComponent({ item: item })
          }
        })
      }
      .height(280)
      .width('80%')
      .scrollBar(BarState.Off)
      .margin({ bottom: 20 })

      OperRowListView({
        bgColor: Color.Transparent,
        operationButtonList: ['comment', 'collect', 'share', 'like'],
        contentDetailData: this.contentDetailData,
        publishCommentModel: this.publishCommentModel,
      })
        .visibility(this.displayDirection == DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None)

      // LiveCommentComponent({ heartNum: this.liveRoomDataBean.likeNum })
      //   .visibility(this.displayDirection == DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None)
      //   .backgroundColor(Color.Black)
    }.alignItems(HorizontalAlign.Start)

  }
}