import { ContentDetailDTO, InteractDataDTO, Params, } from 'wdBean/Index';
import {
  batchLikeAndCollectResult,
  ContentDetailRequest,
  contentListParams,
  postExecuteCollectRecordParams,
  postExecuteLikeParams,
  postInteractAccentionOperateParams
} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';

import { SPHelper, ToastUtils, NumberFormatterUtils } from 'wdKit';
import { WDPlayerController } from 'wdPlayer/Index';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { DisplayDirection, SpConstants } from 'wdConstant/Index'
import { WDShare } from "wdShare"
import { publishCommentModel } from 'wdComponent/Index';
import { ParamType, TrackConstants, TrackingButton, TrackingContent } from 'wdTracking/Index';

interface ILikeStyleResp {
  url: Resource;
  name: string;
}

const TAG = 'PlayerRightView';


//视频点播页右侧操作栏：点赞/收藏/评论/分享 竖着排列
@Component
export struct PlayerRightView {
  private playerController?: WDPlayerController;
  @Consume interactData: InteractDataDTO
  @Consume contentDetailData: ContentDetailDTO
  @Consume newsStatusOfUser: batchLikeAndCollectResult
  @Consume followStatus: string
  @Consume isOpenDetail: boolean
  @Consume isDragging: boolean
  @Consume showComment?: boolean
  @Consume showCommentList: boolean
  @Consume displayDirection: DisplayDirection
  @Consume publishCommentModel: publishCommentModel
  @State likesStyle: number | string = 1 // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
  @State openLikes: boolean = false // 是否可以点赞  1：可以 0：不可以
  pageParam: ParamType = {}
  @Consume pageName: string
  @Consume pageId: string
  followUserId: string = ''
  followUserName: string = ''

  aboutToAppear() {
    // 内容用 点赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
    this.likesStyle = this.contentDetailData.likesStyle
    this.openLikes = this.contentDetailData.openLikes == 1 ? true : false
    // console.log(TAG, 'this.likesStyle', this.likesStyle)
    // console.log(TAG, 'this.openLikes', this.openLikes)
    this.contentTrackingDict()
  }
  contentTrackingDict(){
    this.pageParam = {
      'contentType': `${this.contentDetailData.newsType}`,
      'contentId': `${this.contentDetailData.newsId}`,
      'contentName': `${this.contentDetailData.newsTitle || ''}`,
    }
    this.followUserId = this.contentDetailData?.rmhInfo?.rmhId || ''
    this.followUserName = this.contentDetailData?.rmhInfo?.rmhName || ''
  }
  /**
   * 点赞、取消点赞
   */
  async toggleLikeStatus() {
    // 未登录，跳转登录
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      this.playerController?.pause()
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }
    const params: postExecuteLikeParams = {
      status: this.newsStatusOfUser?.likeStatus == '1' ? 0 : 1,
      contentId: this.contentDetailData?.newsId + '',
      contentType: this.contentDetailData?.newsType + '',
      userName: this.contentDetailData?.userInfo?.userName || '' + '',
      contentRelId: this.contentDetailData?.reLInfo?.relId || '' + '',
      title: this.contentDetailData?.newsTitle || '' + '',
      channelId: this.contentDetailData?.reLInfo?.channelId || '' + '',
      relType: this.contentDetailData?.reLInfo?.relType || '' + '',
      userHeaderUrl: this.contentDetailData?.userInfo?.headPhotoUrl || '' + '',
    }
    console.log(TAG, '点赞params', JSON.stringify(params))
    ContentDetailRequest.postExecuteLike(params).then(res => {
      console.log(TAG, '点赞this.newsStatusOfUser', JSON.stringify(this.newsStatusOfUser))
      if (this.newsStatusOfUser) {
        this.newsStatusOfUser.likeStatus = this.newsStatusOfUser?.likeStatus == '1' ? '0' : '1'
        if (this.newsStatusOfUser.likeStatus == '1') {
          this.interactData.likeNum = Number(this.interactData.likeNum || 0) + 1
          TrackingContent.like(true,this.pageId,this.pageName,this.pageParam)
          console.log(TAG, '点赞')
        } else {
          this.interactData.likeNum = Math.max(0, Number(this.interactData.likeNum || 0) - 1)
          TrackingContent.like(false,this.pageId,this.pageName,this.pageParam)
          console.log(TAG, '取消点赞')
        }
        console.log(TAG, '点赞、取消点赞==', this.newsStatusOfUser?.likeStatus, this.interactData?.likeNum)
        // this.queryContentInteractCount()
      }

    })
  }

  /**
   * 收藏、取消收藏
   */
  async toggleCollectStatus() {
    // 未登录，跳转登录
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }
    const params: postExecuteCollectRecordParams = {
      status: this.newsStatusOfUser?.collectStatus === 1 ? '0' : '1',
      contentList: [{
        contentId: this.contentDetailData?.newsId + '',
        contentType: this.contentDetailData?.newsType + '',
        relType: this.contentDetailData?.reLInfo?.relType || '' + '',
        contentRelId: this.contentDetailData?.reLInfo?.relId || '' + '',
      }],

    }
    ContentDetailRequest.postExecuteCollectRecord(params).then(res => {
      if (this.newsStatusOfUser) {
        this.newsStatusOfUser.collectStatus = this.newsStatusOfUser?.collectStatus === 1 ? 0 : 1
        // this.queryContentInteractCount()
        if (this.newsStatusOfUser.collectStatus === 1) {
          this.interactData.collectNum = Number(this.interactData.collectNum || 0) + 1
          TrackingContent.collect(true,this.pageId,this.pageName,this.pageParam)
          console.log(TAG, '收藏')
        } else {
          this.interactData.collectNum = Math.max(0, Number(this.interactData.collectNum || 0) - 1)
          TrackingContent.collect(false,this.pageId,this.pageName,this.pageParam)
          console.log(TAG, '取消收藏')
        }
        console.log(TAG, '收藏、取消收藏==', this.newsStatusOfUser?.collectStatus, this.interactData?.collectNum)
      }
    })

  }

  /**
   * 查询点赞、收藏数量
   */
  queryContentInteractCount() {
    const params: contentListParams = {
      contentList: [{
        contentId: this.contentDetailData?.newsId + '',
        contentType: this.contentDetailData?.newsType,
      }]
    }
    ContentDetailRequest.getContentInteract(params).then(res => {
      if (res.data && this.interactData) {
        this.interactData.likeNum = res.data[0]?.likeNum || 0
        this.interactData.collectNum = res.data[0]?.collectNum || 0
        this.interactData.commentNum = res.data[0]?.commentNum || 0
      }
      console.log('获取互动点赞等数据===', JSON.stringify(res))
    })
  }

  getHeadUrl() {
    return this.contentDetailData?.rmhInfo?.rmhHeadUrl || this.contentDetailData?.userInfo?.userHeadUrl
  }

  /**
   * 关注号主
   */
  async handleAccention() {
    // 未登录，跳转登录
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }

    const params2: postInteractAccentionOperateParams = {
      attentionUserType: this.contentDetailData?.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
      attentionUserId: this.contentDetailData?.rmhInfo?.userId || '', // 被关注用户号主id
      attentionCreatorId: this.contentDetailData?.rmhInfo?.rmhId || '', // 被关注用户号主id
      // userType: 1,
      // userId: '1',
      status: 1,
    }
    ContentDetailRequest.postInteractAccentionOperate(params2).then(res => {
      console.log(TAG, '关注号主==', JSON.stringify(res.data))
      if (this.followStatus == '1') {
        this.followStatus = '0'
      } else {
        this.followStatus = '1'
        ContentDetailRequest.postPointLevelOperate({ operateType: 6 }).then((res) => {
          if (res.data?.showToast) {
            ToastUtils.showToast(res.data.ruleName + '+' + res.data.rulePoint + '积分', 1000);
          }
        })
        console.log(TAG, '关注号主')
        TrackingContent.follow(true,this.followUserId,this.followUserName,this.pageId,this.pageName,this.pageParam)
      }
    })
  }

  build() {
    Column() {
      this.userBuilderView()
      if (this.contentDetailData?.openLikes == 1) {
        this.likeBuilderView()
      }
      this.collectBuilderView()
      if (this.contentDetailData?.openComment == 1) {
        this.commentBuilderView()
      }
      if(this.contentDetailData?.shareInfo?.shareOpen == 1) {
        this.shareBuilderView()
      }
    }
    // .backgroundColor(Color.Blue)
    // .height('100%')
    .width(58)
    .position({ x: '100%', y: '100%' })
    .markAnchor({ x: '100%', y: '100%' })
    .padding({ bottom: 7, right: 10 })
    .visibility(this.isOpenDetail || this.isDragging || this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL ?
    Visibility.None : Visibility.Visible)

  }

  /**
   * 用户关注、号主页
   */
  @Builder
  userBuilderView() {
    Stack() {
      Image(this.getHeadUrl())
        .width('100%')
        .borderRadius(24)
        .aspectRatio(1)
        .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
        .onClick(() => {
          // 跳转到号主页
          if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
            const params: Params = {
              creatorId: this.contentDetailData.rmhInfo.rmhId,
              pageID: ''
            }
            WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
          } else {
            ToastUtils.showToast("暂时无法查看该创作者主页", 2000);
          }
        })

      Image($r('app.media.ic_add'))
        .width(24)
        .borderRadius(12)
        .position({ x: '50%', y: '100%' })
        .markAnchor({ x: '50%', y: '50%' })
        .visibility(this.followStatus == '1' ? Visibility.None : Visibility.Visible)
        .onClick(() => {
          // TODO:关注动画
          this.handleAccention()
        })


    }
    .height(48)
    .width('100%')
    .margin({ bottom: 30 })
    .visibility(this.getHeadUrl() ? Visibility.Visible : Visibility.None)
  }

  /**
   * 将点赞样式转换为icon
   */
  transLikeStyle(): ILikeStyleResp {
    if (this.likesStyle === 1) {
      return {
        url: this.newsStatusOfUser.likeStatus == '1' ? $r(`app.media.ic_like_check`) : $r(`app.media.ic_like_uncheck`),
        name: '赞'
      }
    } else if (this.likesStyle === 2) {
      return {
        url: this.newsStatusOfUser.likeStatus == '1' ? $r(`app.media.ic_thub_check`) : $r(`app.media.ic_thub_uncheck`),
        name: '祈祷'
      }
    } else if (this.likesStyle === 3) {
      return {
        url: this.newsStatusOfUser.likeStatus == '1' ? $r(`app.media.ic_candle_check`) :
        $r(`app.media.ic_candle_uncheck`),
        name: '默哀'
      }
    }
    return {
      url: $r(`app.media.icon_like_ckeck`), name: '点赞'
    }
  }

  transNum2String(name: 'likeNum' | 'collectNum' | 'commentNum') {
    console.log(TAG, 'transNum2String', this.interactData.likeNum, this.interactData.collectNum,
      this.interactData.commentNum)
    if (name === 'likeNum') {
      return this.interactData.likeNum != 0 ?
      NumberFormatterUtils.formatNumberWithWan(this.interactData.likeNum || '') : ''
    } else if (name === 'collectNum') {
      return this.interactData.collectNum != 0 ?
      NumberFormatterUtils.formatNumberWithWan(this.interactData.collectNum || '') : ''
    } else {
      return this.interactData.commentNum != 0 ?
      NumberFormatterUtils.formatNumberWithWan(this.interactData.commentNum || '') : ''
    }
  }

  /**
   * 点赞、默哀、祈福
   */
  @Builder
  likeBuilderView() {
    Column() {
      Image(this.transLikeStyle().url)
        .width(32)
        .aspectRatio(1)

      Text(this.transNum2String('likeNum') || this.transLikeStyle().name)
        .width('100%')
        .fontWeight(500)
        .textAlign(TextAlign.Center)
        .fontSize(13)
        .fontColor('#FFFFFF')
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .margin({ top: 2 })
    }
    .margin({ bottom: 20 })
    .visibility(this.likesStyle == 4 || this.likesStyle == 'empty' || !this.openLikes ? Visibility.None : Visibility.Visible)
    .onClick(() => {
      // TODO:点赞动画
      this.toggleLikeStatus()
    })
  }

  /**
   * 收藏、取消收藏、收藏文件夹
   */
  @Builder
  collectBuilderView() {
    Column() {
      Image(this.newsStatusOfUser.collectStatus == 1 ? $r(`app.media.ic_collect_check`) :
      $r(`app.media.ic_collect_uncheck`))
        .width(32)
        .aspectRatio(1)

      Text(this.transNum2String('collectNum') || '收藏')
        .width('100%')
        .fontWeight(500)
        .textAlign(TextAlign.Center)
        .fontSize(13)
        .fontColor('#FFFFFF')
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .margin({ top: 2 })

    }
    .margin({ bottom: 20 })
    .onClick(() => {
      this.toggleCollectStatus()
    })
  }

  /**
   * 评论
   */
  @Builder
  commentBuilderView() {
    Column() {
      Image($r(`app.media.ic_comment`))
        .width(32)
        .aspectRatio(1)

      Text(this.interactData.commentNum > 0 ? this.transNum2String('commentNum') : '抢首评')
        .width('100%')
        .fontWeight(500)
        .textAlign(TextAlign.Center)
        .fontSize(13)
        .fontColor('#FFFFFF')
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .margin({ top: 2 })
    }
    .margin({ bottom: 20 })
    .onClick((event: ClickEvent) => {
      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.publishCommentModel.commentContent = ''

      // ToastUtils.showToast('评论为公共方法，待开发', 1000);
      this.showCommentList = true
    })
  }

  /**
   * 分享
   */
  @Builder
  shareBuilderView() {
    Column() {
      Image($r(`app.media.ic_share`))
        .width(32)
        .aspectRatio(1)

      Text('分享')
        .width('100%')
        .fontWeight(500)
        .textAlign(TextAlign.Center)
        .fontSize(13)
        .fontColor('#FFFFFF')
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .margin({ top: 2 })
    }
    .margin({ bottom: 20 })
    .onClick((event: ClickEvent) => {
      this.share()
    })
  }

  share() {

    WDShare.shareContent(this.contentDetailData)
  }
}