import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.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/generated/assets.dart';

import '../../../router/page/notice_board_page_router.dart';
import '../../notice_board/vm/notice_board_view_model.dart';

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

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

  // 顶部tab 切换
  Widget _buildTopSection(
      BuildContext context, WidgetRef ref, _vm, tabsRouter) {
    final topSectionsData = _vm.topSectionsData;
    final currentTabIdx = tabsRouter.activeIndex;
    // 监听 curIdx 的变化
    final curIdx =
        ref.watch(noticeBoardVmProvider.select((value) => value.curIdx));
    return Container(
      color: context.appColors.whiteBG,
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: List.generate(topSectionsData.length, (index) {
            final item = topSectionsData[index];
            return Column(
              children: [
                Container(
                  width: MediaQuery.of(context).size.width / topSectionsData.length - 36,
                  height: 70,
                  padding: const EdgeInsets.only(
                      top: 0, left: 0, right: 0, bottom: 0),
                  decoration: BoxDecoration(
                    color: context.appColors.lightBlueBg, // 设置圆形背景颜色
                    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: 140,
                    height: 140,
                  ).onTap(
                    () {
                      tabsRouter.setActiveIndex(index);
                    },
                    type: ClickType.throttle,
                  ),
                ),
                SizedBox.fromSize(size: const Size(0, 9)),
                MyTextView(
                  item['title'],
                  maxLines: 1, // 设置最大行数为2
                  isTextEllipsis: true, // 超出部分用省略号表示
                  fontSize: 13,
                  textColor: currentTabIdx == index?
                  context.appColors.tabTextSelectedDefault : context.appColors.tabTextUnSelectedDefault,
                  isFontMedium: true,
                ),
              ],
            ).marginOnly(left: 18, right: 18, top: 10, bottom: 10);
          }),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final _vm = ref.read(noticeBoardVmProvider.notifier);
    return Scaffold(
        appBar: MyAppBar.appBar(
          context,
          S.current.notice_board,
          backgroundColor: context.appColors.backgroundWhite,
        ),
        body: AutoTabsRouter.pageView(
          routes: const [
            AnnounPageRoute(),
            EventPageRoute(),
            DocumentsPageRoute(),
          ],
          builder: (context, child, pageController) {
            final tabsRouter = AutoTabsRouter.of(context);
            return Column(
              children: [
                _buildTopSection(context, ref, _vm, tabsRouter),
                Expanded(
                  child: child,
                ),
              ],
            );
          },
        ));
  }
}
