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';
import PageAdModel from '../viewmodel/PageAdvModel';
import { ProcessUtils } from 'wdRouter/Index';
import { GrayManageModel } from '../viewmodel/GrayManageModel';

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 private pageAdvModel: PageAdModel = new PageAdModel();
  @State shareInfo: ShareInfoDTO = {} as ShareInfoDTO
  @State showBottomView: boolean = false;
  @State executedStartTime: number = new Date().getTime()

  // 国殇灰度管理
  GrayManage: SubscribedAbstractProperty<GrayManageModel> =  AppStorage.link<GrayManageModel>('GrayManage')

  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;
    this.pageAdvModel.analysisTopicAdvSource(this.topicDetail)
    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

      // 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 })

        RelativeContainer() {
          // 挂角广告
          this.pageHornAd()
        }

        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)
  }

  /**
   *  页面挂角广告
   */
  @Builder
  pageHornAd() {

    if (this.pageAdvModel.isShowAds) {
      if (this.pageAdvModel.pageCornerAdv.matInfo != null && this.pageAdvModel.pageCornerAdv.matInfo.linkType != '2') {
        // 广告中心的挂角广告
        this.drawPageCornerAdvView(1, 1 == this.pageAdvModel.isRightAdv)
      } else if (this.pageAdvModel.pageCornerContentInfo.advert != null ) {
        // 展现中心的挂角广告业务
        this.drawPageCornerAdvView(2, 1 == this.pageAdvModel.isRightAdv)
      }
    }
  }

  /**
   * 绘制页面挂角
   *
   * @param type  1:广告中心的挂角广告；2：展现中心的挂角广告
   * @param isRightCorne   true:右挂角；false：左挂角
   */
  @Builder
  drawPageCornerAdvView(type: number, isRightCorne: boolean) {
    // 页面左挂角
    Image(type === 1 ? this.pageAdvModel.pageCornerAdv.matInfo.matImageUrl[0]
      : this.pageAdvModel.pageCornerContentInfo.advert.displayUrl)
      .width($r('app.float.vp_80'))
      .height($r('app.float.vp_80'))
      .id("left_iv")
      .alignRules({
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
        left: { anchor: isRightCorne ? "" : '__container__', align: HorizontalAlign.Start },
        right: { anchor: isRightCorne ? '__container__' : "", align: HorizontalAlign.End },
      })
      .margin({
        bottom: "105vp",
        left: isRightCorne ? 0 : $r('app.float.card_comp_pagePadding_lf'),
        right: isRightCorne ? $r('app.float.card_comp_pagePadding_lf') : 0,

      })
      .onClick(() => {
        if (type === 1) {
          // 广告业务跳转
          ProcessUtils.openAdvDetail(this.pageAdvModel.pageCornerAdv.matInfo);
        } else {
          // 展现中心的业务跳转
          ProcessUtils.advJumpMainPage(this.pageAdvModel.pageCornerContentInfo.advert)
        }
      })
      .grayscale(this.GrayManage.get().isMourning() ? 1 : 0)
    // 关闭按钮
    Image($r('app.media.icon_adv_horn_close'))
      .id('left_close')
      .width($r('app.float.vp_16'))
      .alignRules({
        top: { anchor: 'left_iv', align: VerticalAlign.Top },
        left: { anchor: isRightCorne ? '' : 'left_iv', align: HorizontalAlign.Start },
        right: { anchor: isRightCorne ? 'left_iv' : '', align: HorizontalAlign.End },
      })
      .offset({
        x: isRightCorne ? 10 : -10,
        y: isRightCorne ? -10 : -10
      })
      .onClick(() => {
        // 关闭挂角广告
        this.pageAdvModel.isShowAds = false;

      })
      .grayscale(this.GrayManage.get().isMourning() ? 1 : 0)

    if (type == 1) {
      Text($r('app.string.comp_advertisement'))
        .width($r('app.float.vp_28'))
        .height($r('app.float.vp_16'))
        .fontSize($r('app.float.font_size_10'))
        .fontColor(Color.White)
        .id('left_tag')
        .alignRules({
          bottom: { anchor: 'left_iv', align: VerticalAlign.Bottom },
          left: { anchor: isRightCorne ? '' : 'left_iv', align: HorizontalAlign.Start },
          right: { anchor: isRightCorne ? 'left_iv' : '', align: HorizontalAlign.End },
        })
        .textAlign(TextAlign.Center)
        .backgroundColor($r('app.color.res_color_general_000000_30'))
        .borderRadius({
          topLeft: $r('app.float.vp_2'),
          topRight: $r('app.float.vp_2'),
          bottomLeft: $r('app.float.vp_2'),
          bottomRight: $r('app.float.vp_2')
        })
        .grayscale(this.GrayManage.get().isMourning() ? 1 : 0)
    }
  }

  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)
    }
  }
}