import { Overview } from '../components/Overview';
import { AddExpense } from '../components/AddExpense';
import { DevicePage } from '../components/Device';
import { ExpenseItem, loadExpenses } from '../model/ExpenseModel';

@Entry
@Component
struct Index {
  @State currentIndex: number = 0;
  @State showSplash: boolean = true;
  @State splashOpacity: number = 0;
  @State splashScale: number = 0.9;
  @Provide expenses: ExpenseItem[] = [];
  private splashTimer: number = -1;
  private innerSplashTimer: number = -1;

  async aboutToAppear(): Promise<void> {
    this.expenses = await loadExpenses();

    animateTo({ duration: 1000, curve: Curve.EaseOut }, () => {
      this.splashOpacity = 1;
      this.splashScale = 1;
    });

    this.splashTimer = setTimeout(() => {
      animateTo({ duration: 350, curve: Curve.EaseIn }, () => {
        this.splashOpacity = 0;
      });
      this.innerSplashTimer = setTimeout(() => {
        this.showSplash = false;
      }, 350);
    }, 2200);
  }

  aboutToDisappear(): void {
    clearTimeout(this.splashTimer);
    clearTimeout(this.innerSplashTimer);
  }

  async refreshData(): Promise<void> {
    this.expenses = await loadExpenses();
  }

  build() {
    if (this.showSplash) {
      Column() {
        Stack() {
          Column()
            .width('100%')
            .height('100%')
            .linearGradient({
              direction: GradientDirection.Bottom,
              colors: [['#1D2129', 0], ['#2B3A5C', 0.5], ['#1D2129', 1]]
            })

          Column() {
            Text('¥')
              .fontSize(56)
              .fontWeight(FontWeight.Bold)
              .fontColor('#FFFFFF')
              .opacity(this.splashOpacity)
              .scale({ x: this.splashScale, y: this.splashScale })
              .margin({ bottom: 20 })

            Text('这个月你省钱了吗？')
              .fontSize(26)
              .fontWeight(FontWeight.Bold)
              .fontColor('#FFFFFF')
              .opacity(this.splashOpacity)
              .textShadow({ radius: 4, color: 'rgba(0,0,0,0.4)', offsetX: 0, offsetY: 2 })

            Text('记录每一笔开销，让消费更有意义')
              .fontSize(13)
              .fontColor('rgba(255,255,255,0.55)')
              .opacity(this.splashOpacity)
              .margin({ top: 10 })
          }
          .alignItems(HorizontalAlign.Center)
          .width('100%')
        }
      }
      .width('100%')
      .height('100%')
    } else {
      Column()
        .width('100%')
        .height('100%')
        .linearGradient({
          direction: GradientDirection.Bottom,
          colors: [['#F2F3F8', 0], ['#E8EBF2', 1]]
        })

      Column() {
        Tabs({ barPosition: BarPosition.End, index: this.currentIndex }) {
          TabContent() {
            Overview()
          }
          .tabBar(this.TabBar('总览', 0))

          TabContent() {
            AddExpense({ onSaved: () => { this.refreshData(); } })
          }
          .tabBar(this.TabBar('记账', 1))

          TabContent() {
            DevicePage({ onDataChanged: () => { this.refreshData(); } })
          }
          .tabBar(this.TabBar('设备', 2))
        }
        .barHeight(60)
        .barMode(BarMode.Fixed)
        .width('100%')
        .layoutWeight(1)
        .onChange((index: number) => {
          this.currentIndex = index;
        })
      }
      .width('100%')
      .height('100%')
    }
  }

  @Builder
  TabBar(label: string, index: number) {
    Column() {
      if (index === 0) {
        Stack({ alignContent: Alignment.Center }) {
          Circle({ width: 24, height: 24 })
            .fill(index === this.currentIndex ? '#4F6EF7' : '#C9CDD4')
          Path()
            .width(14)
            .height(14)
            .commands('M7 0 A7 7 0 0 1 14 7 L7 7 Z')
            .fill('#FFFFFF')
        }
      } else if (index === 1) {
        Stack({ alignContent: Alignment.Center }) {
          Circle({ width: 28, height: 28 })
            .fill(index === this.currentIndex ? '#4F6EF7' : '#C9CDD4')
          Text('+')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .fontColor('#FFFFFF')
        }
      } else {
        Stack({ alignContent: Alignment.Center }) {
          Circle({ width: 22, height: 22 })
            .fill(index === this.currentIndex ? '#4F6EF7' : '#C9CDD4')
          Text('⌚')
            .fontSize(13)
        }
      }

      Text(label)
        .fontSize(10)
        .fontColor(index === this.currentIndex ? '#4F6EF7' : '#A9AEB8')
        .margin({ top: 4 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .padding({ top: 8 })
  }
}
