import { Action, ContentDetailDTO, LiveDetailsBean, LiveRoomDataBean, LiveRoomItemBean } from 'wdBean/Index'
import { LiveOperRowListView } from 'wdComponent'
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, Logger, SPHelper, WindowModel } from 'wdKit/Index'
import { TrackConstants, TrackingContent, TrackParamConvert } from 'wdTracking/Index'

const TAG = "PlayerCommentComponent"

/**
 *  沉浸式直播--- 聊天区域
 */
@Component
export struct PlayerCommentComponent {
  liveViewModel: LiveViewModel = new LiveViewModel()
  @Consume liveRoomDataBean: LiveRoomDataBean
  @Consume displayDirection: DisplayDirection
  @State private pageModel: PageModel = new PageModel()
  @State liveChatList: Array<LiveRoomItemBean> = []
  @Consume @Watch("lastInputedCommentChagned") lastInputedComment: LiveRoomItemBean
  @Consume @Watch('liveDetailsBeanChange') contentDetailData: ContentDetailDTO
  scroller: Scroller = new Scroller()

  async aboutToAppear(): Promise<void> {

    this.getLiveChatList()
  }

  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.getLiveCommentList(
      1,
      this.contentDetailData?.liveInfo?.mlive?.mliveId,
      this.contentDetailData?.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;
          }
        },
        () => {

        })
  }

  lastInputedCommentChagned() {
    Logger.debug(TAG, "2显示评论》》》: " + JSON.stringify(this.lastInputedComment))

    this.liveChatList.push(this.lastInputedComment)
    if (this.pageModel.viewType == ViewType.LOADED) {
      this.scroller.scrollEdge(Edge.Bottom)
    }
    this.pageModel.viewType = ViewType.LOADED;
  }

  build() {
    Column() {
      Stack({ alignContent: Alignment.BottomStart }) {
        List({ scroller: this.scroller }) {
          // 主持人
          /*if (this.contentDetailData.oldNewsId) {
            ChartItemCompereComponent()
          }*/
          ForEach(this.liveChatList, (item: LiveRoomItemBean) => {
            ListItem() {
              ChatItemComponent({ item: item })
            }
          })
        }
        .width('80%')
        .scrollBar(BarState.Off)

      }
      .constraintSize({
        maxHeight: 280
      })

      // 收藏、分享、点赞是否需要根据字段显隐
      LiveOperRowListView({
        styleType: 3,
        pageComponentType: 2, // 竖屏直播页
        operationButtonList: ['comment', 'collect', 'share', 'like'],
        contentDetailData: this.contentDetailData,
        onCommentInputFocus: () => {


        },
        onCommentInputed: (content) => {
          if (content.comment) {
            this.liveViewModel.sendComment(content.comment, this.contentDetailData).then(result => {
              if (!result) {
                return
              }
              Logger.debug(TAG, "3显示评论》》》: " + JSON.stringify(result))
              this.liveChatList.push(result)
              this.scroller.scrollEdge(Edge.Bottom)
            })

            // 发布评论埋点
            TrackingContent.commentClick(TrackConstants.PageName.Live_Detail,
              TrackConstants.PageName.Live_Detail,
              TrackParamConvert.contentDetail(this.contentDetailData));
          }
        },
        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)

  }
}