import { BreakpointSystem, BreakPointType } from '@ohos/common';
import { commonConstants } from 'main_layout/src/main/ets/constants/CommonConstants';
import TabsViewModel from '../viewmodel/TabsViewModel';
import { HomeComponent } from '../view/HomeComponent';
import { MineComponent } from '../view/MineComponent';
import { TabBarItem } from '../viewmodel/LocalBean';

/**
 * 入口布局
 */
@Builder
export function NavigationPage() {
  Column() {
    TabIndex()
  }
}

@Component
export struct TabIndex {
  @State currentIndex: number = 0;
  @State tabs: TabBarItem[] = TabsViewModel.getTabData();
  @StorageLink('mainBreakpoint') currentBreakpoint: string = commonConstants.breakpointsInitializeName;
  private readonly breakpointSystem: BreakpointSystem = new BreakpointSystem(commonConstants.breakpointSystemName);
  @Provide('pageInfos') pageStack: NavPathStack = new NavPathStack();

  @Builder tabBarBuilder(tabBar: TabBarItem) {
    Flex({
      direction: new BreakPointType({
        sm: FlexDirection.Column,
        md: FlexDirection.Row,
        lg: FlexDirection.Column,
        xl: FlexDirection.Column
      })
      .getValue(this.currentBreakpoint), justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center
    }) {
      Image(this.currentIndex === tabBar.id ? tabBar.selectIcon:tabBar.icon)
        .width(this.currentBreakpoint === 'sm' ? 18 : 18)
        .height(this.currentBreakpoint === 'sm' ? 18 : 18)

      Text(tabBar.name)
        .fontSize($r('app.float.tab_text_font_size'))
        .fontColor(this.currentIndex === tabBar.id ? $r('app.color.tab_font_color_selected') : $r('app.color.tab_font_color_normal'))
        .margin(new BreakPointType<Padding>({
          sm: { top: $r('app.float.tab_text_sm_top'), left: $r('app.float.tab_text_sm_left') },
          md: { top: $r('app.float.tab_text_md_top'), left: $r('app.float.tab_text_md_left') },
          lg: { top: $r('app.float.tab_text_lg_top'), left: $r('app.float.tab_text_lg_left') },
          xl: { top: $r('app.float.tab_text_xl_top'), left: $r('app.float.tab_text_xl_left') }
        })
        .getValue(this.currentBreakpoint))
    }
    .width(commonConstants.flexTabBarWidth)
    .height(commonConstants.flexTabBarHeight)
  }

  aboutToAppear() {
    this.breakpointSystem.register(this.getUIContext());
  }

  aboutToDisappear() {
    this.breakpointSystem.unregister();
  }

  build() {
    Navigation(this.pageStack) {
      Column() {
        Tabs({
          barPosition: new BreakPointType({
            sm: BarPosition.End,
            md: BarPosition.End,
            lg: BarPosition.Start,
            xl: BarPosition.Start
          })
            .getValue(this.currentBreakpoint)
        }) {
          ForEach(this.tabs, (item: TabBarItem) => {
            TabContent() {
              if (item.id === 0) {
                HomeComponent()
              } else {
                MineComponent()
              }
            }
            .tabBar(this.tabBarBuilder(item))
            .width(commonConstants.tabContentWidth)
            .height(commonConstants.tabContentHeight)
          }, (item: TabBarItem) => item.id.toString())
        }
        .vertical(new BreakPointType({
          sm: commonConstants.tabSmVertical,
          md: commonConstants.tabMdVertical,
          lg: commonConstants.tabLgVertical,
          xl: commonConstants.tabXlVertical
        })
          .getValue(this.currentBreakpoint))
        .barWidth(new BreakPointType({
          sm: commonConstants.tabSmBarWidth,
          md: commonConstants.tabMdBarWidth,
          lg: commonConstants.tabLgBarWidth,
          xl: commonConstants.tabXlBarWidth
        })
          .getValue(this.currentBreakpoint))
        .barHeight(new BreakPointType({
          sm: commonConstants.tabSmBarHeight,
          md: commonConstants.tabMdBarHeight,
          lg: commonConstants.tabLgBarHeight,
          xl: commonConstants.tabXlBarHeight
        })
          .getValue(this.currentBreakpoint))
        .onAnimationStart((_: number, targetIndex: number) => {
          this.currentIndex = targetIndex;
        })
        .divider({
          strokeWidth: 0.5,
          color: $r('app.color.tab_line'),
          startMargin: 0,
          endMargin: 0
        })
      }
      .backgroundColor($r('app.color.normal_background'))
    }
    .hideTitleBar(true)
    .mode(NavigationMode.Stack)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}