import 'package:cs_resources/theme/app_colors_theme.dart';
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 '../community/community_vm.dart';
import 'my_following_vm.dart';

class MyFollowingTabs extends HookConsumerWidget {
  List tabsList;
  Widget? Function(BuildContext)? tabItemBuilder;
  dynamic? tabsRouter;
  void Function(int)? onClickAction;
  EdgeInsets? margin;
  MyFollowingTabs({
    Key? key,
    required this.tabsList,
    this.tabsRouter,
    this.onClickAction,
    this.tabItemBuilder,
    this.margin = const EdgeInsets.only(top: 10, bottom: 10, left: 20, right: 20),
  }) : super(key: key);

  Widget _buildTabItem(BuildContext context, WidgetRef ref, vm,state, item, index, int activeTabCounter) {
    final activeTabIdx = tabsRouter!.activeIndex;

    // final activeTabCounter = ref.watch(myFollowingVmProvider.select((state) =>
    //   state.tabsList![index] == 'follow'? state.followerCount: state.followerCount
    // ));


    return Container(
      width: MediaQuery.of(context).size.width / tabsList.length - margin!.left - margin!.right,
      height: 43,
      margin: margin,
      decoration: index==activeTabIdx? BoxDecoration(
        color: index==activeTabIdx? context.appColors.btnBgDefault: ColorUtils.string2Color("#F2F3F6"),
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 1,
            blurRadius: 5,
            offset: const Offset(0, 2), // changes position of shadow
          ),
        ],
      ): null,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: Container(
              alignment: Alignment.center,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  MyTextView(
                    item,
                    fontSize: 16,
                    textAlign: TextAlign.center,
                    isFontMedium: true,
                    textColor: index == activeTabIdx ? Colors.white :ColorUtils.string2Color("#000000"),
                  ),
                  MyTextView(
                    // '(${activeTabCounter.toString()})',
                    '(${activeTabCounter.toString()})',
                    fontSize: 16,
                    textAlign: TextAlign.center,
                    isFontMedium: true,
                    textColor: index == activeTabIdx ? Colors.white :ColorUtils.string2Color("#000000"),
                  ),
                ],
              ),
            ).onTap((){
              onClickAction?.call(index);
            }),
          ),
        ],
      ),
    );
  }

  List<Widget> _buildTabs(BuildContext context, WidgetRef ref, vm, state){
    List tabsList = state.tabsList;
    int tabsLength = tabsList.length;
    return List.generate(tabsLength, (index) {
      final followCount = state.followCount;
      final followerCount = state.followerCount;
      final activeTabCounter = (index == 0? followCount: followerCount);
      return _buildTabItem(context, ref, vm, state, tabsList[index], index, activeTabCounter);
    });
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(myFollowingVmProvider.notifier);
    final state = ref.watch(myFollowingVmProvider);
    // 使用useEffect钩子
    // useEffect(() {
      // print('副作用函数执行');
      // 这里是副作用逻辑
      // 返回清理函数
      // return () {
      //   print('清理函数执行');
      // };
    // }, []); // 空依赖列表意味着这个副作用只在组件挂载时执行一次

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      physics: const BouncingScrollPhysics(),
      clipBehavior: Clip.none,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: _buildTabs(context, ref, vm, state),
      ).constrained(
          maxWidth:  MediaQuery.of(context).size.width
      ),
    );
  }
}