import { BottomNavi, CommonConstants } from 'wdConstant';
import { BottomNavDTO } from 'wdBean';
import { EmitterEventId, EmitterUtils, Logger } from 'wdKit';
import { TopNavigationComponent } from './TopNavigationComponent';
import { MinePageComponent } from './MinePageComponent';
import { CompUtils } from '../../utils/CompUtils';
import PageViewModel from '../../viewmodel/PageViewModel';
import HomeChannelUtils, { AssignChannelParam } from 'wdRouter/src/main/ets/utils/HomeChannelUtils';

const TAG = 'BottomNavigationComponent';
let storage = LocalStorage.getShared();

/**
 * 底部页签导航栏/底导
 */
@Entry(storage)
@Component
export struct BottomNavigationComponent {
  @Provide bottomRectHeight: number = 0
  @Provide topRectHeight: number = 0
  @Provide isLayoutFullScreen: boolean = false
  @Provide isImmersive: boolean = false // 是否开启沉浸式模式 http://192.168.1.3:3300/project/3802/interface/api/189229
  @Provide isNight: boolean = false // 是否开启夜间模式
  @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
  @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  // 底导/顶导全部数据
  @State @Watch('onBottomNavigationDataUpdated') bottomNavList: BottomNavDTO[] = []
  // 底导当前选中/焦点下标
  @State currentNavIndex: number = BottomNavi.NEWS;
  // @State currentTopNavSelectedIndex: number = 0; //
  @State barBackgroundColor: Color = Color.Transparent
  // 底导TabsController
  private navController: TabsController = new TabsController();
  readonly ASPECT_RATIO_1_1: number = 1 / 1; // 底导图片宽高比
  /**
   * Component opacity value: 1.
   */
  readonly FULL_OPACITY: number = 1;
  /**
   * Component opacity value: 0.6.
   */
  readonly SIXTY_OPACITY: number = 0.6;
  // 接收指定频道跳转的参数
  @State assignChannel: AssignChannelParam = new AssignChannelParam()
  // 用于传参到顶导组件，【不用channelParam，主要是时序问题，需要先底导处理完，再延时触发顶导处理】
  @State assignChannel1: AssignChannelParam = new AssignChannelParam()

  async aboutToAppear() {
    Logger.info(TAG, `aboutToAppear currentNavIndex: ${this.currentNavIndex}`);
    let bottomNav = await PageViewModel.getBottomNavData(getContext(this))
    if (bottomNav && bottomNav.bottomNavList != null) {
      Logger.info(TAG, `aboutToAppear, bottomNav.length: ${bottomNav.bottomNavList.length}`);
      // 使用filter方法移除name为'服务'的项
      bottomNav.bottomNavList = bottomNav.bottomNavList.filter(item => item.name !== '服务');
      this.bottomNavList = bottomNav.bottomNavList
    }
    HomeChannelUtils.setBottomNavData(bottomNav)

    EmitterUtils.receiveEvent(EmitterEventId.JUMP_HOME_CHANNEL, (str?: string) => {
      Logger.debug(TAG, 'receiveEvent JUMP_HOME_CHANNEL: ' + str)
      if (str) {
        // 跳转指定频道场景，传参底导id、频道id
        this.assignChannel = JSON.parse(str) as AssignChannelParam
        this.changeBottomNav()
      }
    })
  }

  aboutToDisappear() {
    Logger.info(TAG, `aboutToDisappear, this.currentNavIndex: ${this.currentNavIndex}`);
  }

  build() {
    Tabs({ barPosition: BarPosition.End, index: this.currentNavIndex, controller: this.navController }) {
      ForEach(this.bottomNavList, (navItem: BottomNavDTO, index: number) => {
        TabContent() {
          Column() {
            if (CompUtils.isMine(navItem)) {
              // 我的页面组件数据列表
              MinePageComponent()
            } else {
              TopNavigationComponent({
                groupId: navItem.id,
                topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
                _currentNavIndex: $currentNavIndex,
                currentBottomNavName: navItem.name,
                barBackgroundColor: $barBackgroundColor,
                assignChannel: this.assignChannel1
              })
            }

          }
        }
        .tabBar(this.tabBarBuilder(navItem, index))
      });

    }
    .animationDuration(0)
    .barHeight($r('app.float.bottom_navigation_barHeight'))
    .barMode(BarMode.Fixed)
    // TODO:更详细的判断是视频频道
    .barBackgroundColor(this.barBackgroundColor)
    .onChange((index: number) => {
      Logger.info(TAG, `onChange, index: ${index}`);
      this.currentNavIndex = index;
      // this.onBottomNavigationIndexChange()
    })
    .backgroundColor(this.barBackgroundColor)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

    // .padding({ bottom: this.bottomRectHeight + 'px', top: this.topRectHeight + 'px' }) // 此处margin具体数值在实际中应与导航条区域高度保持一致

  }

  /**
   * TODO:更详细的判断视频频道
   */
  getFontColor(index: number): Color {
    if (this.currentNavIndex === 2 && this.barBackgroundColor === Color.Black) {
      return Color.White
    } else {
      return this.currentNavIndex === index ? Color.Red : Color.Gray
    }
  }

  @Builder
  tabBarBuilder(navItem: BottomNavDTO, index: number) {
    Stack({ alignContent: Alignment.Bottom }) {
      Image(this.currentNavIndex === index ? navItem.iconC : navItem.icon)
        .height(CommonConstants.FULL_PARENT)
        .padding({ bottom: 15, left: 10, right: 10, top: 2 })
        .aspectRatio(this.ASPECT_RATIO_1_1)

      Text(navItem.name)
        .margin({ bottom: $r('app.float.bottom_navigation_margin_bottom') })
        .fontWeight(this.currentNavIndex === index ? FontWeight.Bold : FontWeight.Normal)
        .textAlign(TextAlign.Center)
        .fontSize($r('app.float.font_size_10'))// .fontColor(this.currentNavIndex === index ? Color.Red : Color.Gray)
        .fontColor(this.getFontColor(index))
        .opacity(this.currentNavIndex === index ? this.FULL_OPACITY : this.SIXTY_OPACITY)
    }
    .height($r('app.float.bottom_navigation_barHeight'))
    .hoverEffect(HoverEffect.Highlight)

    // .justifyContent(FlexAlign.Center)
    // .onClick(() => {
    //   Logger.info(TAG, `onClick, index: ${index}`);
    //   this.currentNavIndex = index ?? 0;
    //   this.navController.changeIndex(this.currentNavIndex);
    // })
  }

  // 底导切换函数
  onBottomNavigationIndexChange() {
    Logger.info(TAG, `onBottomNavigationIndexChange this.currentNavIndex: ${this.currentNavIndex}`);
    // 请求顶导数据(参数）：
  }

  onBottomNavigationDataUpdated() {
    // Logger.info(TAG, `onBottomNavigationDataUpdated currentNavIndex: ${this.currentNavIndex},length:${this.bottomNavItemList.length}`);
    this.onBottomNavigationIndexChange()
  }

  /**
   * 底导id变化，即指定频道跳转场景
   */
  changeBottomNav() {
    let index = -1
    for (let i = 0; i < this.bottomNavList.length; i++) {
      let bottomNavDTO: BottomNavDTO = this.bottomNavList[i]
      if (bottomNavDTO.id.toString() === this.assignChannel.bottomNavId) {
        index = i
        break
      }
    }
    if (index >= 0 && index != this.currentNavIndex) {
      // 切底导
      this.currentNavIndex = index
    }

    setTimeout(() => {
      // 底导切换后，触发顶导切换
      this.assignChannel1 = new AssignChannelParam()
      this.assignChannel1.pageId = this.assignChannel.pageId
      this.assignChannel1.channelId = this.assignChannel.channelId
      this.assignChannel1.bottomNavId = this.assignChannel.bottomNavId
    }, 20)
  }
}