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 { SpConstants } from 'wdConstant/Index'
import { WDShare } from "wdShare"

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
  @State likesStyle: number = this.contentDetailData.likesStyle // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空

  aboutToAppear() {

  }

  /**
   * 点赞、取消点赞
   */
  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 + '',
    }
    ContentDetailRequest.postExecuteLike(params).then(res => {

      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
        } else {
          this.interactData.likeNum = Math.max(0, Number(this.interactData.likeNum || 0) - 1)
        }
        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 + '',
      }],

    }
    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
        } else {
          this.interactData.collectNum = Math.max(0, Number(this.interactData.collectNum || 0) - 1)
        }
        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);
          }
        })
      }
    })
  }

  build() {
    Column() {

      this.userBuilderView()
      this.likeBuilderView()
      this.collectBuilderView()
      this.commentBuilderView()
      this.shareBuilderView()

    }
    // .backgroundColor(Color.Blue)
    // .height('100%')
    .width(58)
    .position({ x: '100%', y: '100%' })
    .markAnchor({ x: '100%', y: '100%' })
    .padding({ bottom: this.showComment ? 60 : 10, right: 10 })
    .visibility(this.isOpenDetail || this.isDragging ? 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)
          }
        })

      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 ? Visibility.Visible : Visibility.None)
    .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.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) => {
      ToastUtils.showToast('评论为公共方法，待开发', 1000);
    })
  }

  /**
   * 分享
   */
  @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)
  }
}