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/theme/app_colors_theme.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) {
    final topSectionsData = _vm.topSectionsData;
    // 监听 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: [
                  MyAssetImage(
                    item['icon'],
                    width: MediaQuery.of(context).size.width / topSectionsData.length - 36,
                    height: 70,
                  ).onTap(
                        () {
                      _vm.switchPage(index, context);
                    },
                    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: curIdx == 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.watch(communityVmProvider.notifier);
    return Scaffold(
        appBar: MyAppBar.appBar(
          context,
          "Community",
          backgroundColor: context.appColors.whiteBG,
        ),
        backgroundColor: context.appColors.backgroundDefault,
        body: Row(
          children: [
            Expanded(
              child: Column(
                children: [
                  _buildTopSection(context, ref, vm),
                  const Expanded(
                    child: AutoRouter(),
                  )
                ],
              ),
            )
          ],
        )
    );
  }
}