import { Action, CompDTO, Params, TopNavDTO } from 'wdBean';
import { LazyDataSource, Logger } from 'wdKit';
import { WDRouterRule } from 'wdRouter';
import { PageComponent } from './PageComponent';

const TAG = 'TopNavigationComponent';

/**
 * 顶部页签导航栏/顶导
 */
@Component
export struct TopNavigationComponent {
  // 顶导当前选中/焦点下标
  @State currentTopNavSelectedIndex: number = 0;
  // 顶导数据
  @State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
  @State compList: LazyDataSource<CompDTO> = new LazyDataSource();
  readonly MAX_LINE: number = 1;

  build() {
    Column() {
      Image($r('app.media.icon_ren_min_ri_bao'))
        .width(72)
        .height(29)
        .onClick((event: ClickEvent) => {
          let taskAction: Action = {
            type: 'JUMP_INNER_NEW_PAGE',
            params: {
              pageID: 'E_NEWSPAPER'
            } as Params,
          };
          WDRouterRule.jumpWithAction(taskAction)
        })
      Tabs() {
        ForEach(this.topNavList, (navItem: TopNavDTO, index: number) => {
          TabContent() {
            PageComponent({
              currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
              navIndex: index,
              pageId: navItem.pageId + '',
              channelId: navItem.channelId + ''
            })
          }
          .tabBar(this.tabBarBuilder(navItem, index))
        }, (navItem: TopNavDTO) => JSON.stringify(navItem));
      }
      .barHeight($r('app.float.top_tab_bar_height'))
      .barMode(BarMode.Scrollable)
      .vertical(false)
      .onChange((index: number) => {
        Logger.info(TAG, `onChange index : ${index}`);
        this.currentTopNavSelectedIndex = index;
      })
    }
  }

  @Builder
  tabBarBuilder(item: TopNavDTO, index: number) {
    Column() {
      Text(item.name)
        .fontSize(this.currentTopNavSelectedIndex === index ? $r('app.float.selected_text_size') : $r('app.float.normal_text_size'))
        .fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
        .fontColor(Color.Black)
        .padding({ top: $r('app.float.top_tab_item_padding_top') })
        .maxLines(this.MAX_LINE)
      Divider()
        .width(16)
        .strokeWidth(2) // 分割线粗细度。
        .padding({ top: 2 })
        .color(Color.Red)
        .opacity(this.currentTopNavSelectedIndex === index ? 1 : 0)
    }
    .hoverEffect(HoverEffect.Highlight)
    .constraintSize({
      minWidth: $r('app.float.top_tab_item_min_width'),
      maxWidth: $r('app.float.top_tab_item_max_width')
    })
    // .backgroundColor(Color.Black)
    .padding({
      left: $r('app.float.top_tab_item_padding_horizontal'),
      right: $r('app.float.top_tab_item_padding_horizontal'),
      bottom: $r('app.float.top_tab_item_padding_bottom')
    })
    .id(`col_tabBar${index}`)
  }

  aboutToAppear() {
    Logger.info(TAG, `aboutToAppear this.topNavList : ${JSON.stringify(this.topNavList)}`);
  }

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