import { AppColor, AppSpacing, AppButton, LoadingView, EmptyView } from 'uikit';
import { HomeViewModel } from '../viewmodel/HomeViewModel';
import { User } from '../model/User';
import { AppRouter } from '../router/AppRouter';
import { RouteMap, RouteNames } from '../router/RouteMap';
import { StatusCard } from '../view/StatusCard';

/**
 * 首页（@Entry）：Navigation 根容器，仅编排。
 * 演示「页面 -> ViewModel -> Repository -> Api -> HttpClient」完整链路。
 */
@Entry
@ComponentV2
struct Index {
  @Local pathStack: NavPathStack = new NavPathStack();
  @Local viewModel: HomeViewModel = HomeViewModel.create();
  @Local title: string = 'Harmony Client';

  aboutToAppear(): void {
    AppRouter.init(this.pathStack);
    this.viewModel.load();
  }

  build() {
    Navigation(this.pathStack) {
      Column({ space: AppSpacing.md }) {
        Text(this.title)
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .fontColor(AppColor.textPrimary)

        if (this.viewModel.loading) {
          LoadingView({ text: '加载中...' })
        } else if (this.viewModel.error.length > 0) {
          EmptyView({ text: this.viewModel.error })
        } else {
          ForEach(this.viewModel.users, (user: User) => {
            StatusCard({ title: user.name, subtitle: user.email })
          }, (user: User) => user.id)
        }

        AppButton({
          text: '进入详情页',
          onTap: () => {
            AppRouter.push(RouteNames.DETAIL, '来自首页的参数');
          }
        })
      }
      .width('100%')
      .height('100%')
      .padding(AppSpacing.lg)
      .backgroundColor(AppColor.background)
    }
    .navDestination(this.routeMap)
    .mode(NavigationMode.Stack)
    .hideTitleBar(true)
  }

  @Builder
  routeMap(name: string, param: Object) {
    RouteMap(name, param)
  }
}