import { DisplayUtils, NumberFormatterUtils } from 'wdKit/Index'
import { SPHelper } from 'wdKit';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { SpConstants } from 'wdConstant/Index';
import measure from '@ohos.measure'
import { ParamType, TrackConstants, TrackingContent } from 'wdTracking/Index';
import { ContentDetailDTO, } from 'wdBean';
import { LiveModel } from '../../viewmodel/LiveModel';
import { HttpUtils } from 'wdNetwork/Index';
import vibrator from '@ohos.vibrator';
import { BusinessError } from '@ohos.base';

const TAG = 'LiveLikeComponent';

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

@Component
export struct LiveLikeComponent {
  private LiveModel: LiveModel = new LiveModel()
  @Prop @Watch('onDetailUpdated') contentDetailData: ContentDetailDTO
  @Prop pageComponentType: number
  @State likesStyle: string = "love" // 点赞样式 love爱心型  thumb点赞手势 mourning 蜡烛(默哀) pray 祈福
  @State likeStatus: boolean = false
  @State openLikes: boolean = false // 是否可以点赞  1：可以 0：不可以
  styleType: number = 1 //1: 白色背景（图文底部栏）    2: 黑色背景（图集底部栏） 3 透明背景
  @State likeCount: number = 0 //点赞数
  @State likeBean: Record<string, string> = {}
  pageParam: ParamType = {}

  //上层传值  样例
  // this.data['contentId'] = '30035444649' //必须
  // this.data['userName'] = '人民日报网友2kD2xW'
  // this.data['contentType'] = '8'  //必须
  // this.data['title'] = '开创两校交流先河！克罗地亚教育代表团访问同济大学'
  // this.data['userHeaderUrl'] = ""
  // this.data['channelId'] = "2059"  //必须
  // this.data['status'] = "1"
  // 内容用 是否开启点赞 1是 0否;
  // this.contentDetailData.openLikes == 1
  async aboutToAppear() {
    this.onDetailUpdated()
    this.contentTrackingDict()
  }

  async onDetailUpdated() {
    // 2：竖屏直播页  4：横屏直播页
    // 点赞样式 love爱心型  thumb点赞手势 mourning 蜡烛(默哀) pray 祈福
    this.likesStyle = this.contentDetailData?.liveInfo?.likesStyle
    this.openLikes = this.contentDetailData?.liveInfo?.likeEnable == 1 ? true : false
    console.log(TAG, 'this.contentDetailData', JSON.stringify(this.contentDetailData))
    // 点赞需要数据
    this.likeBean['contentId'] = this.contentDetailData.newsId + ''
    //获取点赞状态
    this.getLikeStatus()
    //获取点赞数
    this.getLikeCount()
  }

  contentTrackingDict() {
    this.pageParam = {
      'contentType': `${this.contentDetailData.newsType}`,
      'contentId': `${this.contentDetailData.newsId}`,
      'contentName': `${this.contentDetailData.newsTitle || ''}`,
    }
  }

  build() {
    // 直播，点赞按钮底测有灰色圆角背景+右上点赞数量
    this.likeCompStyle()
  }

  /**
   * 将点赞样式转换为icon
   */
  transLikeStyle(): ILikeStyleResp {
    if (this.likesStyle === 'love' || this.likesStyle === 'thumb') {
      return {
        url: this.likeStatus ? $r('app.media.ic_like_check') :
          this.styleType == 1 ? $r('app.media.icon_like_default') : $r('app.media.ic_like_uncheck'),
        name: '赞'
      }
    } else if (this.likesStyle === 'pray') {
      return {
        url: this.likeStatus ? $r('app.media.ic_thub_check') :
          this.styleType == 1 ? $r('app.media.icon_like_unselect_light_pray') :
          $r('app.media.icon_like_unselect_night_pray'),
        name: '祈祷'
      }
    } else if (this.likesStyle === 'mourning') {
      return {
        url: this.likeStatus ? $r('app.media.ic_candle_check') :
          this.styleType == 1 ? $r('app.media.icon_like_unselect_light_candle') :
          $r('app.media.icon_like_unselect_night_candle'),
        name: '默哀'
      }
    }
    return {
      url: this.likeStatus ? $r('app.media.ic_like_check') :
        this.styleType == 1 ? $r('app.media.icon_like_default') : $r('app.media.ic_like_uncheck'),
      name: '点赞'
    }
  }

  @Builder
  likeCompStyle() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Column() {
        Image(this.transLikeStyle().url)
          .width(((this.likesStyle === 'mourning'||this.likesStyle === 'pray')&& !this.likeStatus) ?36:24)
          .height(((this.likesStyle === 'mourning'||this.likesStyle === 'pray')&& !this.likeStatus)?36:24)
      }
      .justifyContent(FlexAlign.Center)
      .width(36)
      .height(36)
      .borderRadius(18)
      .margin({top:6})
      .backgroundColor((this.pageComponentType === 4 || this.pageComponentType === 2) ? '#4D000000' :
        this.pageComponentType === 8 ? Color.Transparent : '#FFF5F5F5')

      if (this.likeCount != 0) {
        RelativeContainer() {
          ///2是直播，直播的单独一种样式，
          Image( this.contentDetailData.newsType == 2 ? $r('app.media.live_like_icon_number_bg') : (this.styleType == 1 ? $r('app.media.comment_icon_number_bg') : $r('app.media.ic_like_back_Select')))
            .objectFit(ImageFit.Fill)
            .height(10)
            .resizable({
              slice: {
                top: 1,
                left: 20,
                right: 1,
                bottom: 1
              }
            })
            .alignRules({
              top: { anchor: "Text", align: VerticalAlign.Top },
              left: { anchor: "Text", align: HorizontalAlign.Start },
              right: { anchor: "Text", align: HorizontalAlign.End },
              bottom: { anchor: "Text", align: VerticalAlign.Bottom },
            })
            .id("Image")

          Text(NumberFormatterUtils.formatNumberWithWan(this.likeCount || ''))// Text("44444444")
            .fontSize(8)
            .fontColor('#ffffff')// .backgroundColor('#ED2800')
            .height(12)
            .textAlign(TextAlign.Center)
            .alignRules({
              top: { anchor: "__container__", align: VerticalAlign.Top },
              right: { anchor: "__container__", align: HorizontalAlign.End }
            })
              /*动态计算文字宽度*/
            .width(this.getMeasureText(NumberFormatterUtils.formatNumberWithWan(this.likeCount || '')) +
              8)// .backgroundColor(Color.Green)
            .padding({left:2})
            .id("Text")
            .visibility(this.likeCount > 0 ? Visibility.Visible : Visibility.Hidden)
        }
        .margin({right:0,top:3})
      }
    }
    .width(36)
    .height(36)
    .onClick(() => {
      this.clickButtonEvent()
    })
    .visibility(this.likesStyle == 'empty' || !this.openLikes ? Visibility.None : Visibility.Visible)

  }

  async clickButtonEvent() {
    console.log(TAG, 'clickButtonEvent 点赞点击')
    // 未登录，跳转登录
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      console.log(TAG, '点赞点击,未登录')
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }
    this.executeLike()

  }

  async executeLike() {
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      console.log(TAG, '查询点赞状态,未登录')
      return
    }
    this.LiveModel.getLiveRoomNumberLike(this.likeBean['contentId'], 1, HttpUtils.getDeviceId()).then((data) => {

      console.log(TAG, '点赞接口调用成功', JSON.stringify(data))
      try {
        // 触发马达振动
        vibrator.startVibration({
          type: 'time',
          duration: 100,
        }, {
          id: 0,
          usage: 'alarm'
        }, (error: BusinessError) => {
          if (error) {
            console.error(`Failed to start vibration. Code: ${error.code}, message: ${error.message}`);
            return;
          }
          console.info('Succeed in starting vibration');
        });
      } catch (err) {
        let e: BusinessError = err as BusinessError;
        console.error(`An unexpected error occurred. Code: ${e.code}, message: ${e.message}`);
      }
      this.likeCount++
      this.likeStatus = true

      //内容点赞、取消点赞Tracking 1点赞  0取消点赞
      TrackingContent.like(true, TrackConstants.PageName.DynamicDetail, TrackConstants.PageName.DynamicDetail,
        {
          'contentType': `${this.contentDetailData.newsType}`,
          'contentId': `${this.contentDetailData.newsId}`,
          'contentName': `${this.contentDetailData.newsTitle || ''}`,
        })


    }).catch(() => {
    })
  }

  async getLikeStatus() {
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      console.log(TAG, '查询点赞状态,未登录')
      return
    }
    this.LiveModel.getLiveLike(this.likeBean['contentId'], user_id, HttpUtils.getDeviceId()).then(data => {
      console.log(TAG, '查询点赞、收藏状态==', JSON.stringify(data))
      this.likeStatus = data
    }).catch(() => {
      this.likeStatus = false
    })
  }

  /**
   * 获取点赞数
   */
  getLikeCount() {
    this.LiveModel.getLiveRoomData(this.likeBean['contentId']).then(data => {
      console.log(TAG, '查询点赞、收藏数量 res', JSON.stringify(data))
      if (data) {
        this.likeCount = Number(data.likeNum)
      } else {
        this.likeCount = 0
      }
    }).catch(() => {
      this.likeCount = 0
    })
  }

  private getMeasureText(text: string) {
    let width = measure.measureText({
      textContent: text,
      fontSize: 8,
      lineHeight: 12,
      constraintWidth: DisplayUtils.getDeviceWidth(),
    })
    width = px2vp(width)
    return width
  }
}