import { BottomNavBean, BottomNavi } from 'wdBean';
import { CommonConstants } from 'wdConstant';
import { LazyDataSource, Logger } from 'wdKit';
import { TopNavigationComponent } from './TopNavigationComponent';
import { PageComponent } from './PageComponent';

const TAG = 'BottomNavigationComponent';

/**
 * 底部页签导航栏/底导
 */
@Component
export struct BottomNavigationComponent {
  // 底导/顶导全部数据
  @Prop @Watch('onBottomNavigationDataUpdated') bottomNavList: BottomNavBean[] = []
  // 底导当前选中/焦点下标
  @Provide currentNavIndex: number = BottomNavi.NEWS;
  // 底导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;

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

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

  build() {
    Tabs({ barPosition: BarPosition.End, index: this.currentNavIndex, controller: this.navController }) {
      ForEach(this.bottomNavList, (navItem: BottomNavBean, index: number) => {
        TabContent() {
          Column() {
            if (navItem.topNavChannelList && navItem.topNavChannelList.length == 0 && navItem.name == '我的') {
              PageComponent({ groupList: new LazyDataSource() }) // todo:我的页面组件数据列表
            } else {
              TopNavigationComponent({ topNavList: navItem.topNavChannelList })
            }
          }
        }
        .tabBar(this.tabBarBuilder(navItem, index))
      });
    }
    .barHeight($r('app.float.bottom_navigation_barHeight'))
    .barMode(BarMode.Fixed)
    .onChange((index: number) => {
      Logger.info(TAG, `onChange, index: ${index}`);
      this.currentNavIndex = index;
      // this.onBottomNavigationIndexChange()
    })
  }

  @Builder
  tabBarBuilder(navItem: BottomNavBean, 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)
        .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()
  }
}