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();
      context.router.replace(const MainPageRoute());
    } else {
      appRouter.popUntilRoot();
      appRouter.replace(const MainPageRoute());
    }
  }

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

    // return AutoTabsRouter(
    //   routes: const [
    //     HomePageRoute(),
    //     VisitorPageRoute(),
    //     FeedbackPageRoute(),
    //     MePageRoute(),
    //   ],
    //   transitionBuilder: (context, child, animation) => FadeTransition(
    //     opacity: animation,
    //     child: child,
    //   ),
    //   builder: (context, child) {
    //     final tabsRouter = AutoTabsRouter.of(context);
    //     return AnnotatedRegion<SystemUiOverlayStyle>(
    //         value: ThemeConfig.getSystemUiOverlayStyleByTheme(context),
    //         child: Scaffold(
    //           body: child,
    //           bottomNavigationBar: BottomNavigationBar(
    //             backgroundColor: context.theme.primaryColor,
    //             selectedItemColor: context.theme.colorScheme.secondary,
    //             unselectedItemColor: Colors.grey[500],
    //             elevation: 20,
    //             type: BottomNavigationBarType.fixed,
    //             items: const <BottomNavigationBarItem>[
    //               BottomNavigationBarItem(
    //                 icon: Icon(Icons.home),
    //                 label: 'Home',
    //               ),
    //               BottomNavigationBarItem(
    //                 icon: Icon(Icons.card_giftcard),
    //                 label: 'Visitor',
    //               ),
    //               BottomNavigationBarItem(
    //                 icon: Icon(Icons.feed),
    //                 label: 'Feedback',
    //               ),
    //               BottomNavigationBarItem(
    //                 icon: Icon(Icons.person),
    //                 label: 'Me',
    //               ),
    //             ],
    //             onTap: tabsRouter.setActiveIndex,
    //             currentIndex: tabsRouter.activeIndex,
    //           ),
    //         ));
    //   },
    // );

    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.whiteBG,
          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;
          }(),
        );
      },
    );
  }
}