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, SpConstants, 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'
import { EmitterEventId, EmitterUtils, SPHelper, WindowModel } from 'wdKit/Index'

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> = []
  @Consume contentDetailData: ContentDetailDTO
  @Consume publishCommentModel: publishCommentModel
  scroller: Scroller = new Scroller()

  async aboutToAppear(): Promise<void> {

    this.getLiveChatList()
    //注册通知
    EmitterUtils.receiveEvent(EmitterEventId.COMMENT_PUBLISH, async (targetId?: string) => {
      if (targetId) {
        if (targetId == this.publishCommentModel.targetId) {
          const info = {
            senderUserName: this.publishCommentModel.lastCommentModel.fromUserName,
            text: this.publishCommentModel.lastCommentModel.commentContent,
          } as LiveRoomItemBean

          this.liveChatList.push(info)
          this.scroller.scrollEdge(Edge.Bottom)
          console.log(TAG, '发布评论：', JSON.stringify(this.publishCommentModel.lastCommentModel))
        }
      }
    })

  }

  generateRandomString() {
    let result = '';
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    const charactersLength = characters.length;
    for (let i = 0; i < 6; i++) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
  }

  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;
          }
        },
        () => {

        })
  }

  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({
        styleType: 3,
        componentType: 4,
        pageComponentType: 2, // 竖屏直播页
        operationButtonList: ['comment', 'collect', 'share', 'like'],
        contentDetailData: this.contentDetailData,
        publishCommentModel: this.publishCommentModel,
        showCommentIcon: false,
        onBack: () => {
          WindowModel.shared.setWindowLayoutFullScreen(false)
          WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
        }
      })
        .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)

  }
}