import { BottomNavi, CommonConstants } from 'wdConstant';
import { BottomNavDTO } from 'wdBean';
import { Logger } from 'wdKit';
import { TopNavigationComponent } from './TopNavigationComponent';
import { MinePageComponent } from './MinePageComponent';
import { CompUtils } from '../../utils/CompUtils';
import PageViewModel from '../../viewmodel/PageViewModel';

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
  @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 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;

  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}`);
      this.bottomNavList = bottomNav.bottomNavList
    }
  }

  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({
                topNavList: navItem.topNavChannelList,
                _currentNavIndex: this.currentNavIndex,
                changeBarBackgroundColor: (color: Color) => {
                  this.barBackgroundColor = color
                }
              })
            }

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

    }
    .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)
    .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()
  }
}