import { HomeTab } from './tabs/HomeTab';
import { StatisticsTab } from './tabs/StatisticsTab';
import { MoodLogTab } from './tabs/MoodLogTab';
import { MineTab } from './tabs/MineTab';
import { BasicType } from '../models';
import { YTAvoid } from '../utils/YTAvoid';
import { yTBindSheet } from '../utils/YTBindSheet';
import { ContextHelper } from '../utils/ContextHelper';

@Entry
@Component
struct Index {
  @State currentIndex: number = 0;
  private controller: TabsController = new TabsController();
  contentList: BasicType[] = [
    {
      text: '首页',
      src: $r('app.media.icon_home_unselect'),
      acSrc: $r('app.media.icon_home_select'),
      index: 0
    },
    {
      text: '统计',
      src: $r('app.media.statistics'),
      acSrc: $r('app.media.statistics_check'),
      index: 1
    }, {
    text: '心情日志',
    src: $r('app.media.mood_log'),
    acSrc: $r('app.media.mood_log_check'),
    index: 2
  },
    {
      text: '个人中心',
      src: $r('app.media.my'),
      acSrc: $r('app.media.my_check'),
      index: 3
    }
  ]

  aboutToAppear(): void {

    ContextHelper.init(this.getUIContext(), getContext())
    yTBindSheet.init({
      context: this.getUIContext(),
      options: {
        maskColor: '#63000000',
        showClose: false
      }
    })
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          HomeTab()
        }


        TabContent() {
          StatisticsTab()
        }


        TabContent() {
          MoodLogTab()
        }


        TabContent() {
          MineTab()
        }
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barHeight(0)
      .animationDuration(0)
      .onChange((index: number) => {
        this.currentIndex = index;
      })
      .layoutWeight(1)


      Row({ space: 6 }) {
        Row() {
          ForEach(this.contentList, (item: BasicType) => {
            this.barBuilder(item)
          })
        }
        .width('100%')
        .height(62)
        .borderRadius(31)
        .backgroundColor('#f2ffffff')
        .justifyContent(FlexAlign.SpaceAround)
        .shadow({
          color: '#33000000',
          radius: this.getUIContext().vp2px(30)
        })
        .clip(true)
      }
      .padding({ left: 16, right: 16 })
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .position({
        left: '0%',
        bottom: YTAvoid.getBottom()
      })
    }
  }

  @Builder
  barBuilder(item: BasicType) {
    Column({ space: 4 }) {
      Image(this.currentIndex == item.index ? item.acSrc : item.src)
        .width(24)
      Text(item.text)
        .fontSize(10)
        .lineHeight(12)
        .fontWeight(500)
        .fontColor(this.currentIndex === item.index ? '#FF6A3D' : '#9BA1A6')
    }
    .layoutWeight(1)
    .onClick(() => {
      this.currentIndex = item.index!
      this.controller.changeIndex(this.currentIndex)
    })
  }
}