import {
  Action,
  H5ReceiveDetailBean,
  ContentDetailDTO,
  InteractDataDTO,
  TopicInfo,
  TopicDetailData,
  ShareInfoDTO
} from 'wdBean';
import { WdWebComponent } from 'wdWebComponent';
import { CommonConstants } from 'wdConstant'
import { BridgeWebViewControl } from 'wdJsBridge/Index';
import { NativeCallH5Type } from 'wdWebComponent/src/main/ets/pages/NativeCallH5Type';
import { OperRowListView } from './view/OperRowListView';
import DetailViewModel from '../viewmodel/DetailViewModel';
import { publishCommentModel } from '../components/comment/model/PublishCommentModel';
import { EmptyComponent } from '../components/view/EmptyComponent';
import { NetworkUtil, WindowModel, Logger } from 'wdKit';
import { viewBlogItemInsightIntentShare } from '../utils/InsightIntentShare'
import { common } from '@kit.AbilityKit';
import { PageRepository } from '../repository/PageRepository';
import { CommentDialogView } from './CommentDialogView';
import { faceDetector } from '@kit.CoreVisionKit';
import { channelSkeleton } from './skeleton/channelSkeleton';

const TAG: string = 'SpacialTopicPageComponent'

//专题详情页
@Component
export struct SpacialTopicPageComponent {
  webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
  scroller: Scroller = new Scroller();
  action: Action = {} as Action
  @State webUrl: string = '';
  @State subjectData: string = '';
  @State index: number = 0
  @State currentIndex: number = 0
  @State isPageEnd: boolean = false
  @State showCommentList: boolean = false
  @State interactData: InteractDataDTO = {} as InteractDataDTO
  @Prop reload: number = 0;
  @Provide contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
  private h5ReceiveAppData: H5ReceiveDetailBean = { dataSource: '2' } as H5ReceiveDetailBean
  private webPrepared = false;
  // private dataPrepared = false;
  @State publishCommentModel: publishCommentModel = new publishCommentModel()
  @State operationButtonList: string[] = ['comment', 'collect', 'share']
  @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
  @State isNetConnected: boolean = true
  @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @State showComment: boolean = false
  @State topicInfo: TopicInfo = {} as TopicInfo
  @State topicDetail: TopicDetailData = {} as TopicDetailData
  @State shareInfo: ShareInfoDTO = {} as ShareInfoDTO
  @State showBottomView: boolean = false;
  @State executedStartTime: number = new Date().getTime()

  private trySendData2H5() {
    if (!this.webPrepared) {
      return
    }
    // 数据、web组件，都准备好了，开始塞详情数据
    this.sendContentData2H5(this.h5ReceiveAppData)
  }

  private onWebPrepared() {
    this.webPrepared = true
    this.trySendData2H5()
  }

  private sendContentData2H5(h5ReceiveAppData: H5ReceiveDetailBean) {
    Logger.debug('SpacialTopicPageComponent', 'jsCall_receiveAppData', JSON.stringify(h5ReceiveAppData));
    this.webviewControl.callHandle(NativeCallH5Type.jsCall_receiveAppData,
      JSON.stringify(h5ReceiveAppData), (data: string) => {
        Logger.debug('SpacialTopicPageComponent', "from js data = " + data);
      })
  }

  private receiveH5SendToNativeData(dataString: string | undefined) {
    // this.topicDetail = JSON.parse(dataString);
    if (dataString == undefined) {
      return
    }
    Logger.debug('SpacialTopicPageComponent111', dataString);

    this.topicDetail = JSON.parse(dataString);
    this.topicInfo = this.topicDetail.topicInfo;

    if (this.topicInfo) {
      // 转换详情数据
      this.contentDetailData.openComment = Number(this.topicInfo.commentFlag)
      this.contentDetailData.commentDisplay = Number(this.topicInfo.commentShowFlag)
      this.contentDetailData.newsId = Number(this.topicInfo.topicId)
      this.contentDetailData.newsType = this.topicInfo.topicType
      this.contentDetailData.newsTitle = this.topicInfo.title;
      this.contentDetailData.newsType = this.topicInfo.topicType;
      this.contentDetailData.visitorComment = this.topicInfo.visitorComment;

      //转换分享数据
      this.shareInfo.shareCoverUrl = this.topicInfo.shareCoverUrl
      this.shareInfo.shareOpen = this.topicInfo.shareOpen
      this.shareInfo.sharePosterCoverUrl = this.topicInfo.sharePosterCoverUrl
      this.shareInfo.shareSummary = this.topicInfo.shareSummary
      this.shareInfo.shareTitle = this.topicInfo.shareTitle
      this.shareInfo.shareUrl = this.topicInfo.shareUrl
      this.contentDetailData.shareInfo = this.shareInfo

      console.log('contentDetailData111', JSON.stringify(this.contentDetailData))
      // if(this.topicInfo.shareOpen === 1){
      //   if (!this.operationButtonList.includes('share')) {
      //     this.operationButtonList.push('share');
      //   }
      // } else {
      //   this.operationButtonList = this.operationButtonList.filter(e =>e !== 'share')
      // }

      // 转换评论数据
      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 || '')
      this.publishCommentModel.visitorComment = String(this.contentDetailData?.visitorComment || '')
      this.showBottomView = true

    }
    // this.viewBlogInsightIntentShare();
  }

  //意图上报
  private viewBlogInsightIntentShare() {
    let context = getContext(this) as common.UIAbilityContext;
    viewBlogItemInsightIntentShare(this.executedStartTime, context, this.contentDetailData)
  }

  build() {
    Column() {
      Stack({ alignContent: Alignment.Bottom }) {
        Column() {
          // Text(this.contentDetailData?.newsTitle)
          // .backgroundColor(Color.White)
          // .width('100%')
          // .height(40)
          // .fontSize(18)
          // .textAlign(TextAlign.Center)
          // .fontWeight(500)
          // .visibility(this.action?.params?.backVisibility && this.isPageEnd ? Visibility.Visible : Visibility.None)

          WdWebComponent({
            webviewControl: this.webviewControl,
            webUrl: this.webUrl,
            reload: this.reload,
            onWebPrepared: this.onWebPrepared.bind(this),
            isPageEnd: $isPageEnd,
            receiveH5SendToNativeData: this.receiveH5SendToNativeData.bind(this)
          })
        }
        .width(CommonConstants.FULL_WIDTH)
        .height(CommonConstants.FULL_HEIGHT)
        .padding({ bottom: this.action?.params?.backVisibility ? 115 : 75 })

        if (!this.isNetConnected) {
          EmptyComponent({
            emptyType: 1,
            emptyButton: true,
            retry: () => {
              // this.getDetail()
              this.reload++
            }
          }).padding({ bottom: 200 })
        } else {
          if (!this.isPageEnd) {
            channelSkeleton().padding({ top: `${this.topSafeHeight}px`, bottom: this.bottomSafeHeight })
          }
        }
        //底部交互区
        if (this.showBottomView) {
          OperRowListView({
            contentDetailData: this.contentDetailData,
            publishCommentModel: this.publishCommentModel,
            operationButtonList: this.operationButtonList,
            topicInfo: this.topicInfo,
            styleType: 1,
            onCommentIconClick: () => {
              this.showCommentList = true
            }
          })
          //全部评论
          CommentDialogView({
            index: $index,
            currentIndex: $currentIndex,
            showCommentList: $showCommentList,
            publishCommentModel: $publishCommentModel,
            interactData: $interactData,
          }).visibility(this.showComment ? Visibility.Visible : Visibility.Hidden)
        }
      }
    }.width(CommonConstants.FULL_WIDTH).height(CommonConstants.FULL_HEIGHT)
  }

  aboutToAppear() {
    if (!this.action?.params?.backVisibility) {
      // WindowModel.shared.setWindowLayoutFullScreen(true)
    }
    this.webUrl = this.action?.params?.url || ''
    this.isNetConnected = NetworkUtil.isNetConnected()
    // this.getDetail()
  }

  aboutToDisappear() {
    if (!this.action?.params?.backVisibility) {
      // WindowModel.shared.setWindowLayoutFullScreen(false)
    }
  }
}