import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.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: tabsRouter.activeIndex == 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: AutoTabsRouter.pageView(
            routes: const [
              NewsfeedPageRoute(),
              GaragesalePageRoute(),
            ],
            builder: (context, child, pageController) {
              print("pageView child: $child,  $pageController");
              final tabsRouter = AutoTabsRouter.of(context);
              // 设置当前的 useTag 0 newsFeed 1 garageSale
              vm.setCurrentUseTag(tabsRouter.activeIndex);
              return Column(
                children: [
                  _buildTopSection(context, ref, vm, tabsRouter),
                  Expanded(
                    child: child,
                  ),
                ],
              );
            },
          ),
        );
    }
}