import { Action, H5ReceiveDetailBean, ContentDetailDTO } from 'wdBean';
import { WdWebComponent } from 'wdWebComponent';
import router from '@ohos.router';
import { CommonConstants } from 'wdConstant'
import { BridgeWebViewControl } from 'wdJsBridge/Index';
import { detailedSkeleton } from './skeleton/detailSkeleton'
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 } from 'wdKit';
import { viewBlogItemInsightIntentShare } from '../utils/InsightIntentShare'
import { common } from '@kit.AbilityKit';

const TAG: string = 'SpacialTopicPageComponent'

@Component
export struct SpacialTopicPageComponent {
  webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
  scroller: Scroller = new Scroller();
  action: Action = {} as Action
  @State webUrl: string = '';
  @State isPageEnd: boolean = false
  @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

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

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

  private sendContentData2H5(h5ReceiveAppData: H5ReceiveDetailBean) {
    this.webviewControl.callHandle(NativeCallH5Type.jsCall_receiveAppData,
      JSON.stringify(h5ReceiveAppData), (data: string) => {
      })
  }

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

  private async getDetail() {
    this.isNetConnected = NetworkUtil.isNetConnected()

    let contentId: string = ''
    let relId: string = ''
    let relType: string = ''
    if (this.action && this.action.params) {
      if (this.action.params.contentID) {
        contentId = this.action.params.contentID;
      }
      if (this.action && this.action.params && this.action.params.extra) {
        if (this.action.params.extra.relId) {
          relId = this.action.params.extra.relId;
        }
        if (this.action.params.extra.relType) {
          relType = this.action.params.extra.relType
        }

      }
      let detailBeans = await DetailViewModel.getDetailPageData(relId, contentId, relType)
      if (detailBeans && detailBeans.length > 0) {
        this.contentDetailData = detailBeans[0];
        this.viewBlogInsightIntentShare()
        // if (this.contentDetailData[0]?.openComment) {
        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.trySendData2H5()
      }
    }
  }

  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,
          })
        }
        .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()
            }
          }).padding({ bottom: 200 })
        } else {
          if (!this.isPageEnd) {
            detailedSkeleton().padding({ bottom: this.bottomSafeHeight })
          }
        }
        //底部交互区
        OperRowListView({
          contentDetailData: this.contentDetailData,
          publishCommentModel: this.publishCommentModel,
          operationButtonList: this.operationButtonList,
        })
      }
    }.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.getDetail()
  }

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