export class BarPositionOption {
  selects: Array<SelectOption> = [];
  positions: Array<BarPosition> = [];
}

const barPositionOptions: BarPositionOption = {
  selects: [
    { value: 'BarPosition.Start' },
    { value: 'BarPosition.End' }],
  positions: [
  BarPosition.Start,
  BarPosition.End]
}

@Component
export struct TabsExample {
  private controller: TabsController = new TabsController()

  @State private barPosition: BarPosition = BarPosition.Start;
  @State private index: number = 0;
  @State private vertical: boolean = false;
  @State private scrollable: boolean = true;
  @State private useBuilder: boolean = true;
  @State private hideTabBar: boolean = false;

  build() {
    Column() {
      Tabs({ barPosition: this.barPosition, index: this.index, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar('blue')
      }
      .width(360)
      .height(296)
      .vertical(this.vertical)
      .scrollable(this.scrollable)
      .barWidth((this.hideTabBar && this.vertical) ? 0 : -1)
      .barHeight((this.hideTabBar && !this.vertical) ? 0 : -1)
      .barMode(BarMode.Fixed)
      .animation({
        duration: 500
      })

      // barPosition
      Column() {
        Row() {
          Text('barPosition')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)

          Select(barPositionOptions.selects)
            .value('BarPosition.Start')
            .font({ size: 12 })
            .optionFont({ size: 12 })
            .onSelect((index: number) => {
              this.barPosition = barPositionOptions.positions[index];
            })
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
        .backgroundColor($r('sys.color.ohos_id_color_background'))

        // index
        Row() {
          Text('index')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
          Slider({ max: 5 })
            .onChange((value: number, mode: SliderChangeMode) => {
              this.index = value;
            })
        }
        .backgroundColor($r('sys.color.ohos_id_color_background'))

        // vertical
        Row(){
          Text('vertical')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
          Toggle({ type:ToggleType.Switch, isOn: this.vertical})
            .onChange((isOn:boolean)=> {
              this.vertical = isOn;
            })
        }.width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
        .backgroundColor($r('sys.color.ohos_id_color_background'))

        // scrollable
        Row(){
          Text('scrollable')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
          Toggle({ type:ToggleType.Switch, isOn: this.scrollable})
            .onChange((isOn:boolean)=> {
              this.scrollable = isOn;
            })
        }.width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
        .backgroundColor($r('sys.color.ohos_id_color_background'))

        // hideTabBar
        Row(){
          Text('hideTabBar')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
          Toggle({ type:ToggleType.Switch, isOn: this.hideTabBar})
            .onChange((isOn:boolean)=> {
              this.hideTabBar = isOn;
            })
        }.width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
        .backgroundColor($r('sys.color.ohos_id_color_background'))
      }
    }
  }
}