import { TitleButton } from '../LayoutInterface/Interface/ButtonInterface';
import {LeftSideBars} from '../LayoutInterface/Layout/LeftSideBar'
import { mwInfo } from '../DispWinInfo/DispWinInfo'
import {LeftSideComponent} from './LeftSideComponent'
@ComponentV2
export struct LeftSideTab {
  private leftSideBarTabs: TabsController = new TabsController();
  @Local leftSideBarFocusIndex: number = 0;
  @Local isExpanded:boolean=true;
  @Consumer('LeftSideWidth') leftSideWidth:number=mwInfo.width * 0.1;

  build() {
    Row() {
      Column({space:1}){
        Button()
          .backgroundImagePosition({ x: '5%', y: '5%' })
          .backgroundColor(Color.Transparent)
          .backgroundImageSize({
            width: '90%', // 图片宽度占满按钮
            height: '90%' // 图片高度占满按钮
          })
          .backgroundImage(this.isExpanded ? $r('app.media.base_expand_on'):$r('app.media.base_expand_off'))
          .type(ButtonType.Normal)
          .width(mwInfo.width*0.013)
          .height(mwInfo.width*0.013)
          .onClick(()=>{
            this.isExpanded = !this.isExpanded;
            this.leftSideWidth=this.isExpanded?mwInfo.width * 0.1:0
        }).margin({ top: 2,left:1,bottom:0,right:2})
        Scroll() {
          Flex({ direction: FlexDirection.Column}) {
            Column({ space: 5 }) {
            ForEach(LeftSideBars, (item: TitleButton, index: number) => {
                Button()
                  .backgroundImagePosition({ x: '5%', y: '5%' })
                  .backgroundColor(Color.Transparent)
                  .backgroundImageSize({
                    width: '90%', // 图片宽度占满按钮
                    height: '90%' // 图片高度占满按钮
                  })
                  .backgroundImage($r('app.media.'+item.btnIcon))
                  .fontWeight(index === this.leftSideBarFocusIndex ? FontWeight.Bold : FontWeight.Normal)
                  .width(mwInfo.width*0.013)
                  .height(mwInfo.width*0.013)
                  .type(ButtonType.Normal)
                  .onClick(() => {
                    this.leftSideBarTabs.changeIndex(index);
                    this.leftSideBarFocusIndex = index;
                  })
            })}
            Blank().layoutWeight(1)
          }
        }
        .align(Alignment.Start)
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.Off)
        .width(mwInfo.width*0.013)
        .height(mwInfo.width*0.013)
        .height('100%')
      }.borderWidth(1)
       .borderColor(Color.Grey)
      Column({space:1}){
        Tabs({ barPosition: BarPosition.Start, controller: this.leftSideBarTabs }) {
          ForEach(LeftSideBars, (item: TitleButton, index: number) => {
            TabContent() {
              LeftSideComponent();
            }
          })
        }.barHeight(0)
      }.width(this.isExpanded?this.leftSideWidth:0)
    }.width('auto')
  }
}