import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:shared/utils/device_utils.dart';
import '../../router/page/main_page_router.dart';
import 'package:router/ext/auto_router_extensions.dart';

import 'main_view_model.dart';

@RoutePage()
class MainPage extends HookConsumerWidget {
  const MainPage({super.key});

  //启动当前页面
  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.popUntilRoot();
      if (context.router.current.name != 'MainPageRoute') {
        context.router.replace(const MainPageRoute());
      }
    } else {
      appRouter.popUntilRoot();
      if (appRouter.current.name != 'MainPageRoute') {
        appRouter.replace(const MainPageRoute());
      }
    }
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(mainViewModelProvider.notifier);
    final state = ref.watch(mainViewModelProvider);

    return AutoTabsScaffold(
      routes: const [
        HomePageRoute(),
        VisitorPageRoute(),
        FeedbackPageRoute(),
        MePageRoute(),
      ],
      transitionBuilder: (context, child, animation) => FadeTransition(
        opacity: animation,
        child: child,
      ),
      bottomNavigationBuilder: (context, tabsRouter) {
        return BottomNavigationBar(
          elevation: 10,
          backgroundColor: context.appColors.backgroundWhite,
          type: BottomNavigationBarType.fixed,
          currentIndex: tabsRouter.activeIndex,
          onTap: tabsRouter.setActiveIndex,
          unselectedLabelStyle: const TextStyle(color: AppColorsTheme.color666666, fontWeight: FontWeight.w400),
          selectedLabelStyle: TextStyle(color: context.appColors.textPrimary, fontWeight: FontWeight.w400),
          unselectedFontSize: 12,
          selectedFontSize: 12,
          items: () {
            var items = <BottomNavigationBarItem>[];
            state.bottomMap.forEach((k, v) {
              items.add(BottomNavigationBarItem(
                label: k,
                icon: v[0],
                activeIcon: DeviceUtils.isDarkMode(context) ? v[2] : v[1],
              ));
            });
            return items;
          }(),
        );
      },
    );
  }
}
