import { ContentDetailDTO, InteractDataDTO } from 'wdBean/Index';
import Curves from '@ohos.curves'
import { ContentDetailRequest } from 'wdDetailPlayApi/Index'
import { DetailPlayShortVideoPage } from './DetailPlayShortVideoPage'

import {
  batchContentDetailParams,
  compListItem,
  contentListParams,
  getRecCompInfoParams
} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { Logger, WindowModel, DateTimeUtils } from 'wdKit/Index';
import { PictureLoading } from './PictureLoading';
import { DisplayDirection } from 'wdConstant/Index';
import { window } from '@kit.ArkUI';
import { EmptyComponent, WDViewDefaultType } from 'wdComponent/Index';
import { TrackConstants, TrackingPageBrowse } from 'wdTracking/Index';
import { LottieView } from 'wdComponent/Index'

interface loadMoreData {
  pageNum: number;
  refreshTime: number;
  loadStrategy: string;
}

const TAG = 'VideoChannelDetail'
const storage = LocalStorage.getShared();

@Entry(storage)
@Component
export struct VideoChannelDetail {
  private groupId: string = '' // 楼层id
  @Provide private pageId: string = '' //页面id
  @Provide private pageName: string = ''
  private pageNum: number = 1
  private pageSize: number = 5
  private loadStrategy: string = 'first_load' // 首次加载： first_load, 上推刷新：  push_up, 下拉刷新： pull_down
  private refreshTime: number = new Date().getTime() // 第一页刷新时间，用于频道分页排序时过滤，查询时携带【首刷、下拉取当前最新时间；其他的都使用首刷的时间】
  private channelId: string = '' // 频道id
  private channelStrategy: string = '1' // 频道策略 1-推荐;2-时间线
  // private topicId?: string = '' // 专题id
  // private recommend?: string = '' // 0.非推荐，1.推荐；
  @Link @Watch('navIndexChange') bottomNavIndex: number
  @Link @Watch('navIndexChange') topNavIndex: number
  @Prop @Watch('autoRefreshChange') autoRefresh: number = 0
  @Consume barBackgroundColor: Color
  private swiperController: SwiperController = new SwiperController()
  @Consume showComment: boolean
  @Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0
  @Provide windowHeight: number = AppStorage.get<number>('windowHeight') || 0
  @Provide bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
  @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @Consume @Watch('pageShowChange') pageShow: number
  @Consume @Watch('pageHideChange') pageHide: number
  @Provide switchVideoStatus: boolean = true
  // @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL
  @Consume displayDirection: DisplayDirection
  @Provide showCommentList: boolean = false
  @State data: ContentDetailDTO[] = []
  @State currentIndex: number = 0
  @State interactDataList: InteractDataDTO[] = []
  @State totalCount: number = 0
  @State isMouted: boolean = false
  @State isRequestError: boolean = false
  @State isRequesting: boolean = false
  pageShowTime: number = 0;
  pageHideTime: number = 0;
  @Provide onlyWifiLoadVideo: boolean = false
  @Provide toastTextVisible: boolean = false
  @StorageLink('GestureLoadStrategy') GestureLoadStrategy: number = 0

  autoRefreshChange() {
    if (this.topNavIndex === 0 && !this.isRequesting) {
      this.data = []
      this.interactDataList = []
      this.totalCount = 0
      this.isMouted = false
      this.getRecCompInfo()
    }

  }

  pageShowChange() {

    if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
      this.barBackgroundColor = Color.Black
      this.switchVideoStatus = true
      this.openFullScreen()
    }

    this.pageShowTime = DateTimeUtils.getTimeStamp()
  }

  pageHideChange() {
    this.barBackgroundColor = Color.Transparent
    this.switchVideoStatus = false
    this.closeFullScreen()

    console.log(TAG, '一级视频隐藏')
    this.pageHideTime = DateTimeUtils.getTimeStamp()
    let duration = 0
    duration = Math.floor((this.pageHideTime - this.pageShowTime) / 1000)
    TrackingPageBrowse.trackCommonPageExposureEnd(TrackConstants.PageName.Customer_Personal,
      TrackConstants.PageName.Customer_Personal, duration)
  }

  /**
   * 监听视频频道激活或失活
   */
  navIndexChange() {
    console.log('navIndexChange', this.bottomNavIndex, this.topNavIndex)
    if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
      // this.barBackgroundColor = Color.Black
      this.switchVideoStatus = true
      this.openFullScreen()
    } else {
      // this.barBackgroundColor = Color.Transparent
      this.switchVideoStatus = false
      this.closeFullScreen()
    }
  }

  aboutToAppear() {
    this.openFullScreen()
    // 根据视频频道传参查询视频楼层信息
    this.getRecCompInfo()
    Logger.info(TAG, 'aboutToAppear');
  }

  aboutToDisappear(): void {
    this.closeFullScreen()
    Logger.info(TAG, 'aboutToDisappear');
  }

  /**
   * 开启沉浸式
   */
  openFullScreen() {
    // WindowModel.shared.setWindowSystemBarProperties({
    //   statusBarContentColor: '#ffffff',
    // })
  }

  /**
   * 关闭沉浸式
   */
  closeFullScreen() {
    // WindowModel.shared.setWindowSystemBarProperties({
    //   statusBarContentColor: '#000000',
    //
    // })
  }

  onBackPress(): boolean | void {
    if (this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL) {
      this.displayDirection = DisplayDirection.VERTICAL
      WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
      window.Orientation.PORTRAIT :
      window.Orientation.LANDSCAPE)
    }
  }

  pageTransition() {
    // 为目标页面时，进入：从右边侧滑入，退出：是右侧划出；跳转别的页面：左侧划出，返回：左侧划入。
    PageTransitionEnter({ type: RouteType.Push, duration: 300 })
      .slide(SlideEffect.Right)
    PageTransitionEnter({ type: RouteType.Pop, duration: 300 })
      .slide(SlideEffect.Left)
    PageTransitionExit({ type: RouteType.Push, duration: 300 })
      .slide(SlideEffect.Left)
    PageTransitionExit({ type: RouteType.Pop, duration: 300 })
      .slide(SlideEffect.Right)
  }

  /**
   * 根据视频频道传参查询视频楼层信息
   */
  async getRecCompInfo() {
    if (this.data.length > 0 && this.data.length === this.totalCount) {
      AlertDialog.show({ message: '没有更多视频了~' })
      return
    }
    this.isRequesting = true
    const params: getRecCompInfoParams = {
      groupId: this.groupId,
      pageId: this.pageId,
      channelId: this.channelId,
      loadStrategy: this.loadStrategy,
      channelStrategy: this.channelStrategy,
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      refreshTime: this.refreshTime,
    }

    await ContentDetailRequest.getRecCompInfo(params).then(async res => {
      this.isRequestError = false
      console.log('根据视频频道传参查询视频楼层信息totalCount', res.data?.totalCount + '')

      this.totalCount = res.data?.totalCount || 0
      const list1: batchContentDetailParams = {
        contents: []
      }
      const list2: contentListParams = {
        contentList: []
      }

      if (res.data?.compList.length) {
        res.data?.compList.map((item: compListItem) => {
          list1.contents.push({
            contentId: item.operDataList[0].objectId,
            contentRelId: item.operDataList[0].relId,
            contentType: Number(item.operDataList[0].objectType),
            relId: item.operDataList[0].relId,
            relType: item.operDataList[0].relType,
          })

          list2.contentList.push({
            contentId: item.operDataList[0].objectId,
            contentType: Number(item.operDataList[0].objectType),
          })
        })
      }

      await this.batchContentDetail(list1, list2)

      setTimeout(() => {
        this.isMouted = true
      }, 500)

    }).catch(() => {
      //   获取内容失败请重试
      this.isRequestError = true
      this.isRequesting = false
    })
  }

  /**
   * 根据视频楼层信息批量查询视频列表
   */
  async batchContentDetail(list: batchContentDetailParams, list2: contentListParams) {
    if (list.contents.length > 0) {
      await ContentDetailRequest.batchContentDetail(list).then(async res => {
        if (res.data) {
          await this.getContentInteract(list2)
          this.data = this.data.concat(res.data)
        }
        console.log('根据视频楼层信息批量查询视频列表', JSON.stringify(res.data))
      }).finally(() => {
        setTimeout(() => {
          this.isRequesting = false
        }, 2000)

      })
    } else {
      this.isRequesting = false
    }
  }

  /**
   * 根据视频信息批量查询点赞、收藏状态
   */
  async getContentInteract(list: contentListParams) {
    if (list.contentList.length > 0) {
      await ContentDetailRequest.getContentInteract(list).then(res => {
        if (res.data) {
          this.interactDataList = this.interactDataList.concat(res.data)
        }
        console.log('根据视频信息批量查询点赞、收藏状态', res.data)
      })
    }
  }

  build() {
    Stack({ alignContent: Alignment.Center }) {
      if (this.isRequestError) {
        EmptyComponent({
          emptyType: WDViewDefaultType.WDViewDefaultType_NoVideo,
          retry: () => {
            this.getRecCompInfo()
          }
        })
      } else {

        PictureLoading()
          .visibility(this.isMouted ? Visibility.None : Visibility.Visible)

        Swiper(this.swiperController) {
          ForEach(this.data, (item: ContentDetailDTO, index: number) => {
            DetailPlayShortVideoPage({
              contentDetailData: item,
              currentIndex: this.currentIndex,
              index: index,
              interactData: this.interactDataList[index]
            })
          }, (item: ContentDetailDTO) => item.newsId + '')
        }
        .displayCount(1, true)
        .disableSwipe(this.displayDirection === DisplayDirection.VERTICAL || this.showCommentList ? false : true)
        .visibility(this.isMouted ? Visibility.Visible : Visibility.Hidden)
        .indicator(false)
        .vertical(true)
        .loop(false)
        .curve(Curves.initCurve(Curve.EaseIn))
        .width('100%')
        .height('100%')
        .onChange((index: number) => {
          this.currentIndex = index
          console.info('onChange==', index.toString())

          if (this.currentIndex === this.data.length - 1) {
            this.pageNum++
            this.refreshTime = new Date().getTime()
            this.loadStrategy = 'push_up'
            this.getRecCompInfo()
          }
        })
        // 作为手势动画的背景
        Row() {}
        .justifyContent(FlexAlign.Center)
        .width('100%')
        .height('100%')
        .visibility(this.isMouted && this.GestureLoadStrategy == 0 ? Visibility.Visible : Visibility.Hidden)
        .backgroundColor('rgba(0, 0, 0, 0.50)')
        .onTouch(() => {
          this.GestureLoadStrategy = 1
        })
        // 手势动画 初次进入显示
        LottieView({
          name: 'slider_up_view_more',
          path: "lottie/slider_up_view_more.json",
          lottieWidth: 167,
          lottieHeight: 167,
          autoplay: true,
          loop: true
        })
          .visibility(this.isMouted && this.GestureLoadStrategy == 0 ? Visibility.Visible : Visibility.Hidden)
          .onTouch(() => {
            this.GestureLoadStrategy = 1
          })

      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#000000')
  }
}