import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/color_utils.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/my_appbar.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:widgets/widget_export.dart';

import '../../router/page/community_page_router.dart';
import 'community_vm.dart';

@RoutePage()
class CommunityPage extends HookConsumerWidget {
    const CommunityPage({Key? key}) : super(key: key);

    //启动当前页面
    static void startInstance({BuildContext? context}) {
      if (context != null) {
        context.router.push(const CommunityPageRoute());
      } else {
        appRouter.push(const CommunityPageRoute());
      }
    }


     Widget _buildTopSection(BuildContext context, WidgetRef ref, vm, tabsRouter) {
        final topSectionsData = vm.topSectionsData;
        final currentTabIdx = tabsRouter.activeIndex;
        // 监听 curIdx 的变化
        // final curIdx = ref.watch(communityVmProvider.select((value) => value.curIdx));
        return Container(
          color: Colors.white,
          padding: const EdgeInsets.only(top: 30, bottom: 30),
          child: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: List.generate(topSectionsData.length, (index) {
                final item = topSectionsData[index];
                return Flexible(
                  flex: 1,
                  child: Column(
                    children: [
                      Container(
                        width: MediaQuery.of(context).size.width / topSectionsData.length - 36,
                        height: 70,
                        decoration: BoxDecoration(
                          // color: currentTabIdx == index ? ColorUtils.string2Color('#E6F2FF') : Colors.white,
                          shape: BoxShape.circle, // 设置为圆形
                          boxShadow: currentTabIdx == index ? [
                            BoxShadow(
                              color: context.appColors.tabLightBlueShadow, // 设置阴影颜色
                              blurRadius: 5, // 设置模糊半径
                              spreadRadius: 0.05, // 控制阴影扩散
                              offset: const Offset(0, 4), // 设置阴影偏移量
                            ),
                          ] : [],// 未选中时无阴影,
                        ),
                        child: MyAssetImage(
                          item['icon'],
                          width: MediaQuery.of(context).size.width / topSectionsData.length - 36,
                          height: 70,
                        ).onTap(() {
                            tabsRouter.setActiveIndex(index);
                          },
                          type: ClickType.throttle,
                        ),
                      ),
                      SizedBox.fromSize(size: const Size(0, 9)),
                      Text(
                        item['title'],
                        maxLines: 1, // 设置最大行数为2
                        overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
                        style: TextStyle(
                            fontSize: 15.0,
                            color: currentTabIdx == index ? ColorUtils.string2Color('#4161D0'):Colors.black,
                            fontWeight: FontWeight.w500
                        ), // 设置字体大小
                      ),
                    ],
                  ),
                ).marginOnly(left: 18, right: 18, top: 10, bottom: 10);
              }),
            ),
          ),
        );
    }

    @override
    Widget build(BuildContext context, WidgetRef ref) {
        final vm = ref.read(communityVmProvider.notifier);

        return Scaffold(
            appBar: MyAppBar.appBar(
              context,
              "Community",
              backgroundColor: context.appColors.whiteBG,
            ),
            backgroundColor: context.appColors.backgroundDefault,
          body: NestedScrollView(
              headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
                return <Widget>[
                  SliverToBoxAdapter(
                    child: Container(
                      child: const SizedBox.shrink(),
                    )
                  ),
                  SliverToBoxAdapter(
                    child: Consumer(
                      builder: (context, ref, _) {
                        final tabsRouter = ref.watch(communityVmProvider).tabsRouter;
                        final vm = ref.read(communityVmProvider.notifier);
                        Log.d("community_page---buildTopSection ---${tabsRouter}");
                        Log.d("community_page---buildTopSection ---${vm.state.curIdx}");

                        // return _buildTopSection(context, ref, vm, tabsRouter);
                        if(tabsRouter != null){
                          return _buildTopSection(context, ref, vm, tabsRouter);
                        }else {
                          return const SizedBox.shrink();
                        }
                      },
                    ),
                  ),
                ];
              },
              body: AutoTabsRouter.pageView(
                routes: const [
                  NewsfeedPageRoute(),
                  GaragesalePageRoute(),
                ],
                builder: (context, child, pageController) {
                  final tabsRouter = AutoTabsRouter.of(context);
                  // 设置当前的 useTag 0 newsFeed 1 garageSale
                  vm.setCurrentUseTag(tabsRouter.activeIndex);
                  // 将tabsRouter 放入 CommunityVmProvider 中
                  vm.setTabsRouterAndPageController(tabsRouter, pageController);
                  return Column(
                    children: [
                      // _buildTopSection(context, ref, vm, tabsRouter),
                      Expanded(
                        child: child,
                      ),
                    ],
                  );
                },
              ),
          ),
        );
    }
}