import { BottomNavDTO, TopNavDTO } from 'wdBean';
import { SpConstants } from 'wdConstant';
import { Logger, NetworkUtil, SPHelper, ToastUtils } from 'wdKit';
import { ProcessUtils, WDRouterPage, WDRouterRule } from 'wdRouter';
import { PageComponent } from './PageComponent';
import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout';
import { FirstTabTopSearchComponent } from '../search/FirstTabTopSearchComponent';
import { AssignChannelParam } from 'wdRouter/src/main/ets/utils/HomeChannelUtils';
import { PeopleShipMainComponent } from '../peopleShip/PeopleShipMainComponent';
import { channelSkeleton } from '../skeleton/channelSkeleton';
import { ParamType, TrackConstants, Tracking, TrackingButton } from 'wdTracking/Index';
import DailyPaperTopicModel from '../../model/DailyPaperTopicModel';
import { CompUtils } from '../../utils/CompUtils';
import ChannelViewModel from '../../viewmodel/ChannelViewModel';

const TAG = 'TopNavigationComponent';

const storage = LocalStorage.getShared();

/**
 * 顶部页签导航栏/顶导
 */
@Entry(storage)
@Component
export struct TopNavigationComponentNew {
  private topRectHeight: string = AppStorage.get<number>('topSafeHeight') + 'px';
  private pageName: string = ''
  private pageId: number = 0
  readonly MAX_LINE: number = 1; // 顶部tab text最大行数
  private swiperController: SwiperController = new SwiperController()
  private listScroller: Scroller = new Scroller()
  /**
   *  首页 底导 某个tab 对象
   */
  navItem: BottomNavDTO = {} as BottomNavDTO
  // 背景色
  @Consume barBackgroundColor: Color
  // 首页当前正在哪个tab的索引值
  @Link _currentNavIndex?: number;
  // 记录首页底部tab 的索引值
  @State bottomNavIndex: number = 0
  // 顶导当前选中/焦点下标
  @State @Watch('updateCurrentTopNavSelectedIndex') currentTopNavSelectedIndex: number = 0;
  // 顶导数据
  @State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
  //
  @State indexSettingChannelId: number = AppStorage.get<number>('indexSettingChannelId') || 2002
  //本地缓存频道id列表
  @State storageChannelIds: string = AppStorage.get<string>('channelIds') || ''
  // 首页设置的频道信息数组
  @State homeChannelList: TopNavDTO[] = []
  // 我的频道列表
  @State myChannelList: TopNavDTO[] = []
  // 更多频道列表
  @State moreChannelList: TopNavDTO[] = []
  // 地方频道列表
  @State localChannelList: TopNavDTO[] = []
  @ObjectLink @Watch('onAssignChannelChange') assignChannel: AssignChannelParam
  // 底导传递过来的自动刷新通知
  @Prop @Watch('onAutoRefresh') autoRefresh: number = 0
  // 传递给page的自动刷新通知
  @State autoRefresh2Page: number = 0
  @State animationDuration: number = 0
  @State indicatorLeftMargin: number = 0
  @State indicatorWidth: number = 0
  @State isClickMorningEveningPaper: boolean = false
  // 顶部导航栏是否有临时跳转频道数据不
  @State haveTempTabData: boolean = false

  build() {
    Column() {
      // 频道分类list
      RelativeContainer() {
        this.tabBar()
        Swiper(this.swiperController) {
          ForEach(CompUtils.isNews(this.navItem) ? this.myChannelList : this.topNavList,
            (navItem: TopNavDTO, index: number) => {
              if (CompUtils.isRMH(this.navItem) && this.isSpecialChannel(navItem)) {
                // 人民号 -- 关注tab
                PeopleShipMainComponent({
                  currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
                  navIndex: index,
                  pageId: navItem?.pageId + '',
                  channelId: navItem?.channelId + '',
                  autoRefresh: this.autoRefresh2Page
                })
              } else {
                if (!this.isBroadcast(navItem) && !this.isLayout(navItem)) {
                  PageComponent({
                    currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
                    navIndex: index,
                    pageId: navItem?.pageId + '',
                    channelId: navItem?.channelId + '',
                    autoRefresh: this.autoRefresh2Page
                  })
                } else {
                  channelSkeleton()
                }
              }
            })
        }
        .loop(false)
        .indicator(false)
        .effectMode(EdgeEffect.None)
        .index(this.currentTopNavSelectedIndex)
        .cachedCount(0)
        .id('pageContent')
        .alignRules({
          'top': { 'anchor': 'tabList', 'align': VerticalAlign.Bottom },
          'middle': { 'anchor': '__container__', 'align': HorizontalAlign.Center },
          'bottom': { 'anchor': '__container__', 'align': VerticalAlign.Bottom }
        })
        .onAnimationStart((curIndex: number, index: number) => {
          Logger.info(TAG, `onAnimationStart ${curIndex} ${index}`);
          if (curIndex === index) {
            return
          }

          this.channelJumpToPage(index)

        })
        .onAnimationEnd((index: number) => {
          Logger.info(TAG, `onAnimationEnd ${index}`);
        })
        .onChange((index) => {
          Logger.info(TAG, `onChange index : ${index}`);
          if (this.isLayoutByIndex(index) || this.isBroadcastByIndex(index)) {
            let nextIndex = this.currentTopNavSelectedIndex > index ? index - 1 : index + 1
            if (nextIndex < this.myChannelList.length) {
              // 电子报和播报 相邻
              if (this.isBroadcastByIndex(nextIndex) || this.isLayoutByIndex(nextIndex)) {
                nextIndex = this.currentTopNavSelectedIndex > index ? nextIndex - 1 : nextIndex + 1
                if (nextIndex < this.myChannelList.length) {
                  this.changePage(nextIndex)
                } else {
                  this.changePage(this.currentTopNavSelectedIndex)
                }

              } else {
                this.changePage(nextIndex)
              }
            } else {
              // 极左极右有特殊频道，用旧值
              this.changePage(this.currentTopNavSelectedIndex)
            }
          } else {
          }

        })
      }
      .width('100%')
      .height('100%')
    }
    // 预留状态栏
    .margin({ top: this.topRectHeight })
  }

  /**
   * 新闻tab 头部
   */
  @Builder
  topBar() {
    Column() {
      Row() {

        FirstTabTopSearchComponent()

        Image($r('app.media.icon_ren_min_ri_bao'))
          .width(72)
          .height(29)
          .onClick(() => {
            ProcessUtils.gotoENewsPaper()
          })
        Stack({ alignContent: Alignment.Center }) {
          Image($r('app.media.background_read_paper_home'))
            .width('100%')
            .height('100%')
            .objectFit(ImageFit.Contain)
          Row() {
            Image($r('app.media.icon_read_paper_home'))
              .width(18)
              .height(18)
            Text('早晚报')
              .fontColor("#666666")
              .fontSize($r('app.float.font_size_13'))
          }
          .alignItems(VerticalAlign.Center)
          .justifyContent(FlexAlign.Center)
        }
        .height(30)
        .width(124)
        .onClick(() => {
          //防止多次点击
          if (!this.isClickMorningEveningPaper) {
            this.isClickMorningEveningPaper = true;
            this.clickMorningEveningPaper()
          }
        })
      }.width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .width('100%')
    .height(40)
    .padding({ top: 10 })
    .backgroundColor($r('app.color.white'))
    .id('topBar')
  }

  @Builder
  tabBar() {
    if (CompUtils.isNews(this.navItem)) {
      // 顶部搜索、日报logo、早晚报
      this.topBar()
      ChannelSubscriptionLayout({
        currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
        homeChannelList: this.homeChannelList,
        myChannelList: $myChannelList,
        moreChannelList: $moreChannelList,
        localChannelList: $localChannelList,
        haveTempTabData: this.haveTempTabData,
        changeTab: (index) => {
          this.channelJumpToPage(index)
        }
      })
        .id('channelManageBtn')
        .alignRules({
          'top': { 'anchor': 'topBar', 'align': VerticalAlign.Bottom },
          'right': { 'anchor': '__container__', 'align': HorizontalAlign.End }
        })

      List({ scroller: this.listScroller }) {
        ForEach(this.myChannelList, (navItem: TopNavDTO, index: number) => {
          ListItem() {
            this.tabBarBuilder(navItem, index)
          }
        })
      }
      .listDirection(Axis.Horizontal)
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.None)
      .padding({ left: 8, top: 0, right: 0 })
      .height($r('app.float.top_tab_bar_height'))
      .backgroundColor(this.barBackgroundColor)
      .id('tabList')
      .alignRules({
        'top': { 'anchor': 'topBar', 'align': VerticalAlign.Bottom },
        'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start },
        'right': { 'anchor': 'channelManageBtn', 'align': HorizontalAlign.Start }
      })
    } else {
      Row() {
        Image($r('app.media.icon_search'))
          .width('24vp')
          .height('24vp')
      }
      .height($r('app.float.top_tab_bar_height_common'))
      .width('40vp')
      .margin({ right: 10 })
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .id('searchBtn')
      .alignRules({
        'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
        'right': { 'anchor': '__container__', 'align': HorizontalAlign.End }
      })
      .onClick(() => {
        Logger.info(TAG, `搜索按钮点击: 人民号`);
        TrackingButton.searchClick(TrackConstants.PageName.Search, "PEOPLE")
        let params = { 'tabName': "PEOPLE" } as Record<string, string>
        WDRouterRule.jumpWithPage(WDRouterPage.searchPage, params)
      })

      List({ scroller: this.listScroller }) {
        ForEach(this.topNavList, (navItem: TopNavDTO, index: number) => {
          ListItem() {
            this.tabBarBuilder(navItem, index)
          }
        })
      }
      .listDirection(Axis.Horizontal)
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.None)
      .height($r('app.float.top_tab_bar_height_common'))
      .backgroundColor(this.barBackgroundColor)
      .id('tabList')
      .alignRules({
        'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
        'middle': { 'anchor': '__container__', 'align': HorizontalAlign.Center }
      })
    }
  }

  /**
   *  顶部导航栏
   * @param item
   * @param index
   */
  @Builder
  tabBarBuilder(item: TopNavDTO, index: number) {
    Column() {
      Text(item?.name)
        .fontSize($r('app.float.selected_text_size'))
        .fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
        .fontColor(this.currentTopNavSelectedIndex === index ? Color.Black : "#999999")
        .padding({ top: $r('app.float.top_tab_item_padding_top'), bottom: $r('app.float.top_tab_item_padding_bottom') })
        .maxLines(this.MAX_LINE)
        .id(index.toString())
        .onAreaChange((oldValue: Area, newValue: Area) => {
          if (this.currentTopNavSelectedIndex === index &&
            (this.indicatorLeftMargin === 0 || this.indicatorWidth === 0)) {
            if (newValue.position.x != undefined) {
              let positionX = Number.parseFloat(newValue.position.x.toString())
              this.indicatorLeftMargin = Number.isNaN(positionX) ? 0 : positionX
            }
            let width = Number.parseFloat(newValue.width.toString())
            this.indicatorWidth = Number.isNaN(width) ? 0 : width
          }
        })
      if (this.currentTopNavSelectedIndex === index) {
        Row()
          .width(20)
          .height(3)
          .backgroundImage($r('app.media.icon_channel_active'), ImageRepeat.NoRepeat)
          .backgroundImageSize(ImageSize.Contain)
      }
    }
    .hoverEffect(HoverEffect.Highlight)
    .constraintSize({
      minWidth: $r('app.float.top_tab_item_min_width'),
      maxWidth: $r('app.float.top_tab_item_max_width')
    })
    .height('100%')
    // .backgroundColor(Color.Transparent)
    .padding({
      left: $r('app.float.top_tab_item_padding_horizontal'),
      right: $r('app.float.top_tab_item_padding_horizontal'),
    })
    .justifyContent(FlexAlign.Center)
    .id(`col_tabBar${index}`)
    // .margin({ right: this.myChannelList.length === index + 1 ? 36 : 0 })
    .onClick(() => {
      Logger.debug(TAG, `onClick, index: ${index}`);
      if (this.currentTopNavSelectedIndex === index) {
        // 当前tab，单击事件
        this.doAutoRefresh()
      } else {
        this.channelJumpToPage(index)
      }
    })
  }

  /**
   * 频道信息跳转页面方法
   * @param index
   */
  private channelJumpToPage(index: number) {
    if (this.isBroadcastByIndex(index)) {
      // 跳转到播报页面
      ProcessUtils.gotoBroadcastPage(this.myChannelList[index].pageId)
    } else if (this.isLayoutByIndex(index)) {
      // 跳转到电子报页面
      ProcessUtils.gotoENewsPaper()
    } else {
      this.changePage(index)
    }

  }

  /**
   *  改变频道页
   * @param index  频道所在的序列号
   */
  private changePage(index: number) {
    Logger.info(TAG, `修改页面 changePage index : ${index}`);
    this.currentTopNavSelectedIndex = index
    this.swiperController.changeIndex(index)
    this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
  }

  /**
   *  频道是播报
   * @param item
   * @returns
   */
  private isBroadcast(item?: TopNavDTO): boolean {
    return item?.channelId === 2066
  }

  /**
   * 频道是电子报
   * @param item
   * @returns
   */
  private isLayout(item?: TopNavDTO): boolean {
    return item?.channelId === 2006
  }

  /**
   * 检测播报
   * @param index
   * @returns
   */
  private isBroadcastByIndex(index: number): boolean {
    let item = this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]
    return this.isBroadcast(item)
  }

  /**
   *  检测电子报
   * @param index
   * @returns
   */
  private isLayoutByIndex(index: number): boolean {
    let item = this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]
    return this.isLayout(item)
  }

  private isSpecialChannel(item?: TopNavDTO) {
    // 版面、播报、关注，可以用这个判断
    return item?.channelType === 3
  }

  async aboutToAppear() {


    if (CompUtils.isNews(this.navItem)) {

      // 请求顶导网络数据
      this.getTopNavList(this.navItem.id)

    } else {
      // if(CompUtils.isNews(this.navItem)){
      //   //处理新闻tab顶导频道数据
      //   this.topNavListHandle()
      // }

      this.changePage(this.currentTopNavSelectedIndex)
    }


  }

  onTopNavigationDataUpdated() {
    Logger.info(TAG,
      `onTopNavigationDataUpdated currentTopNavIndex: ${this.currentTopNavSelectedIndex},topNavList.length:${this.topNavList.length}`);
  }

  /**
   *
   */
  updateCurrentTopNavSelectedIndex() {
    if (CompUtils.isNews(this.navItem)) {
      const tab = this.myChannelList[this.currentTopNavSelectedIndex]
      // 埋点
      const params: ParamType = {
        "pageName": tab.name,
        "tabName": tab.name,
        "pageId": tab.pageId,
      }
      Tracking.event("home_page_tab_click", params)
    } else if (CompUtils.isRMH(this.navItem)) {
      const tab = this.topNavList[this.currentTopNavSelectedIndex]
      // 埋点
      const params: ParamType = {
        "pageName": tab.name,
        "tabName": tab.name,
        "pageId": tab.pageId,
      }
      Tracking.event("People_account_page_tab_click", params)
    }
  }

  /**
   * 自动刷新方法
   */
  onAutoRefresh() {
    if (this.bottomNavIndex != this._currentNavIndex) {
      return
    }
    // 通知page刷新
    this.doAutoRefresh()
  }

  private doAutoRefresh() {
    // 通知page刷新
    this.autoRefresh2Page++
  }

  /**
   * 判断是否当前页面处理逻辑，如消息通知，只需要切换到当前底导的处理，过滤掉非当前。
   */
  private isCurrentPage(): boolean {
    return this._currentNavIndex === this.bottomNavIndex
  }

  /**
   * 频道id变化，即指定频道跳转场景
   */
  onAssignChannelChange() {

    if (!this.isCurrentPage()) {
      return
    }
    let channelId = this.assignChannel.channelId

    let index = -1
    if (this._currentNavIndex === 0) {
      // 第一个，新闻，先拿我的，再拿其他
      index = this.getChannelByMine(channelId)
      if (index == -1) {
        // 不在我的里，需要临时新增频道展示
        let channel = this.getChannelByOthers(channelId)
        if (channel) {
          this.myChannelList.push(channel)
          setTimeout(() => {
            this.changePage(this.myChannelList.length - 1)
          }, 20)
        }
      } else {
        // 直接切换
        this.changePage(index)
      }
    } else {
      index = this.getChannelByTopNav(channelId)
      if (index > -1) {
        // 找到了，直接切换，否则不处理
        this.changePage(index)
      }
    }

  }

  /**
   * 非新闻，从topNav里拿数据
   */
  private getChannelByTopNav(channelId: string) {
    for (let i = 0; i < this.topNavList.length; i++) {
      let topNavDTO: TopNavDTO = this.topNavList[i]
      if (topNavDTO.channelId.toString() === channelId) {
        return i
      }
    }
    return -1
  }

  /**
   * 新闻，从myChannelList里拿数据
   */
  private getChannelByMine(channelId: string) {
    for (let i = 0; i < this.myChannelList.length; i++) {
      let topNavDTO: TopNavDTO = this.myChannelList[i]
      if (topNavDTO?.channelId?.toString() === channelId) {
        return i
      }
    }
    return -1
  }

  /**
   * 新闻，从其他里拿数据
   */
  private getChannelByOthers(channelId: string) {
    for (let i = 0; i < this.moreChannelList.length; i++) {
      let topNavDTO: TopNavDTO = this.moreChannelList[i]
      if (topNavDTO.channelId?.toString() === channelId) {
        this.moreChannelList.splice(i, 1)
        this.haveTempTabData = true
        return topNavDTO
      }
    }
    for (let j = 0; j < this.localChannelList.length; j++) {
      let topNavDTO: TopNavDTO = this.localChannelList[j]
      if (topNavDTO.channelId?.toString() === channelId) {
        this.localChannelList.splice(j, 1)
        this.haveTempTabData = true
        return topNavDTO
      }
    }
    return null
  }

  /**
   *  进入早晚报专题
   */
  clickMorningEveningPaper() {

    // 早晚报埋点
    TrackingButton.click('morning_evening_news_click', TrackConstants.SummaryType.MorningAndEveningNews,
      TrackConstants.SummaryType.MorningAndEveningNews)

    if (NetworkUtil.isNetConnected()) {
      DailyPaperTopicModel.getDailyPaperTopic().then(dailyPaperTopicBean => {
        if (dailyPaperTopicBean && dailyPaperTopicBean.id > 0) {
          SPHelper.default.saveSync('dailyPaperTopicPageId', dailyPaperTopicBean.id);
          ProcessUtils.gotoMorningEveningPaper()
        } else {
          ToastUtils.showToast('暂无早晚报信息', 1000)
        }
        let timer = setInterval(() => {
          this.isClickMorningEveningPaper = false
          clearInterval(timer);
        }, 1000);
      }).catch((err: string) => {
        ToastUtils.showToast('暂无早晚报信息', 1000)
        let timer = setInterval(() => {
          this.isClickMorningEveningPaper = false
          clearInterval(timer);
        }, 1000);
      })
    } else {
      ToastUtils.showToast('网络出小差了，请检查网络后重试', 1000)
      let timer = setInterval(() => {
        this.isClickMorningEveningPaper = false
        clearInterval(timer);
      }, 1000);
    }
  }

  //请求顶导数据
  async getTopNavList(id: number) {

    Logger.debug(TAG, 'getTopNavList=存储=>' + this.storageChannelIds)

    let bottomNavDetail = await ChannelViewModel.getBottomNavDetailData(id, this.storageChannelIds)
    let topNavList = bottomNavDetail?.topNavChannelList || []

    //let provinceName = SPHelper.default.getSync(SpConstants.LOCATION_PROVINCE_NAME, '') as string
    let _myChannelList: TopNavDTO [] = []

    topNavList.forEach(item => {
      if (item.defaultPermitted === 1) {
        console.debug('TopNavigationComponent', '--homeChannelList--->' + item.name)
        this.homeChannelList.push(item)
      }

      //TODO 暂时隐藏播报
      if (item.name !== '播报') {
        if (item.myChannel === '1') {
          _myChannelList.push(item)
        } else if (item.moreChannel === '1' && item.myChannel !== '1') {
          this.moreChannelList.push(item)
        } else if (item.localChannel === '1' && item.myChannel !== '1') {
          this.localChannelList.push(item)
        }
      }
    })

    this.myChannelList = _myChannelList

    //缓存首页频道
    let index = this.myChannelList.findIndex(_item => _item?.channelId === this.indexSettingChannelId)
    if (index > -1) {
      this.currentTopNavSelectedIndex = index
    }

    // 存储我的频道栏目中的频道id信息
    let channelIds: number [] = []
    this.myChannelList.forEach(item => {
      if (item != undefined && item.channelId != undefined) {
        channelIds.push(item.channelId)
      }
    })
    AppStorage.setOrCreate('channelIds', channelIds.join(','))
  }
}