import { ContentDetailDTO, LiveRoomItemBean } from 'wdBean/Index'
import { CustomPullToRefresh, EmptyComponent, ErrorComponent, WDViewDefaultType } from 'wdComponent/Index'
import CustomRefreshLoadLayout from 'wdComponent/src/main/ets/components/page/CustomRefreshLoadLayout'
import { RefreshLayoutBean } from 'wdComponent/src/main/ets/components/page/RefreshLayoutBean'
import PageModel from 'wdComponent/src/main/ets/viewmodel/PageModel'
import { ViewType } from 'wdConstant/Index'
import { LiveViewModel } from '../../viewModel/LiveViewModel'
import { TabChatItemComponent } from './TabChatItemComponent'
import { EmitterEventId, EmitterUtils, LazyDataSource, Logger } from 'wdKit'
import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel'

const TAG: string = 'TabChatComponent';

/**
 *
 * 非沉浸式---大家聊
 */
@Component
export struct TabChatComponent {
  @State private pageModel: PageModel = new PageModel()
  liveViewModel: LiveViewModel = new LiveViewModel()
  @State liveChatList: LazyDataSource<LiveRoomItemBean> = new LazyDataSource();
  @Consume contentDetailData: ContentDetailDTO
  @Consume publishCommentModel: publishCommentModel
  @Prop @Watch("lastInputedCommentChanged") lastInputedComment: LiveRoomItemBean
  private scroller: Scroller = new Scroller()
  index: number = 0
  @Prop @Watch('updateData') parentComponentIndex: number
  private initUI: boolean = true

  /**
   *
   */
  updateData() {

    if (this.index === this.parentComponentIndex && this.initUI) {
      this.initUI = false
      this.getLiveList()
    }

  }

  aboutToAppear(): void {

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

          this.liveChatList.push(info)
          this.pageModel.viewType = ViewType.LOADED;
          if (this.pageModel.viewType == ViewType.LOADED) {
            this.scroller.scrollEdge(Edge.Bottom)
          }
          console.log(TAG, '发布评论：', JSON.stringify(this.publishCommentModel.lastCommentModel))
        }
      }
    })
  }

  lastInputedCommentChanged(info: string) {
    Logger.debug(TAG, "2显示评论》》》: " + JSON.stringify(this.lastInputedComment))
    this.liveChatList.push(this.liveViewModel.deepCopyLiveRoomItem(this.lastInputedComment))
    if (this.pageModel.viewType == ViewType.LOADED) {
      this.scroller.scrollEdge(Edge.Bottom)
    }
    this.pageModel.viewType = ViewType.LOADED;
  }

  build() {
    Stack() {
      if (this.pageModel.viewType == ViewType.LOADING) {
        this.LoadingLayout()
      } else if (this.pageModel.viewType == ViewType.EMPTY || this.pageModel.viewType == ViewType.ERROR) {
        EmptyComponent({ emptyType: WDViewDefaultType.WDViewDefaultType_NoComment1, showBackButton:false})
      } else {

        CustomPullToRefresh({
          alldata: this.liveChatList,
          scroller: this.scroller,
          hasMore: false,
          customList: () => {
            this.ListLayout()
          },
          onRefresh: (resolve) => {
            this.pageModel.currentPage ++
            this.getLiveList(resolve)
          },

        })
      }
    }
    .align(Alignment.Top)
    .backgroundColor('#F5F5F5')
    .height('100%')
    .width('100%')
  }

  @Builder
  ListLayout() {
    List({ scroller: this.scroller }) {

      LazyForEach(this.liveChatList, (item: LiveRoomItemBean) => {
        ListItem() {
          TabChatItemComponent({ item: item })
        }
      },
        (item: LiveRoomItemBean, contentIndex: number) => JSON.stringify(item)
      )

    }.edgeEffect(EdgeEffect.None)
    .scrollBar(BarState.Off)


  }

  @Builder
  LoadingLayout() {
    CustomRefreshLoadLayout({
      refreshBean: new RefreshLayoutBean(true,
        $r('app.media.ic_pull_up_load'), $r('app.string.pull_up_load_text'), this.pageModel.pullDownRefreshHeight)
    })
  }

  async getLiveList(resolve?: (value: string | PromiseLike<string>) => void) {

    if (this.pageModel.isLoading) {

      if (resolve) {
        resolve('已更新至最新')
      }
      return
    }
    this.pageModel.isLoading = true
    this.liveViewModel.getLiveChatList(
      this.pageModel.currentPage,
      this.contentDetailData?.liveInfo?.mlive?.mliveId,
      String(this.contentDetailData.newsId),
      20,)
      .then(
        (data) => {
          this.pageModel.isLoading = false
          if (resolve) {
            if (this.pageModel.currentPage == 1) {
              resolve('已更新至最新')
            } else {
              resolve('')
            }
          }
          // if (this.pageModel.currentPage === 1) {
          //   this.liveChatList.clear()
          // }
          Logger.debug(TAG, `${JSON.stringify(data)}`)
          if (data.barrageResponses && data.barrageResponses.length > 0) {
            this.pageModel.viewType = ViewType.LOADED;
            this.liveChatList.push(...data.barrageResponses)

            if (this.pageModel.currentPage === 1) {
              setTimeout(() => {
                this.scroller.scrollToIndex(this.liveChatList.totalCount() - 1)
              }, 300)
            }
            // this.pageModel.currentPage++;
            // if (data.barrageResponses.length === this.pageModel.pageSize) {
            //
            //   this.pageModel.hasMore = true;
            // } else {
            //   this.pageModel.hasMore = false;
            // }
          } else {
            if (this.liveChatList.totalCount() == 0 ) {
              this.pageModel.viewType = ViewType.EMPTY;
            }
          }
        },
        () => {
          Logger.debug(TAG, `error`)
          if (this.liveChatList.totalCount() == 0) {
            this.pageModel.viewType = ViewType.ERROR;
          }
        })
  }

  aboutToDisappear(): void {
  }
}