YYHome/packages/cpt_community/lib/modules/community/newsfeed_tabs.dart

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_page.dart';
import 'community_vm.dart';

class NewsfeedTabs extends HookConsumerWidget {
  List<String> tabsList;
  Widget? Function(BuildContext)? tabItemBuilder;
  dynamic? tabsRouter;
  void Function(Map<String, dynamic>)? onClickAction;
  NewsfeedTabs({
    Key? key,
    required this.tabsList,
    this.tabsRouter,
    this.onClickAction,
    this.tabItemBuilder
  }) : super(key: key);

  Widget _buildTabItem(BuildContext context, WidgetRef ref, vm, item, index) {
    final providerCommunityState = ref.watch(communityVmProvider);
    int lastNewsFeedTabIdx = 0;
    int lastGarageTabIdx = 0;
    final newsfeedTabCount = ref.read(communityVmProvider.notifier).state!.newsFeedTabsList!.length;
    // 监听 activeTabIdx 的变化
    final activePageIdx = ref.watch(communityVmProvider.select((state) => state.currentPageViewIdx));
    int currentCatgoryIdx = activePageIdx >= newsfeedTabCount? 1: 0;


    int curTabIdx = 0;
    // final activeTabIdx = tabsRouter!.activeIndex;
    // final activeTabIdx = tabsRouterKey.currentState?.controller?.activeIndex ?? 0;

    // 监听 currentPageViewIdx 的变化
    ref.listen(communityVmProvider.select((state) => state.currentPageViewIdx), (oldValue, newValue){
      // Log.d("--111--oldValue: $oldValue, newValue: $newValue---------------");
      // Log.d("--111--lastNewsFeedTabIdx: $lastNewsFeedTabIdx, lastGarageTabIdx: $lastGarageTabIdx---------------");


      if(oldValue! < newsfeedTabCount){
        if( newValue >= newsfeedTabCount ){
          // 由 newsfeed 切换到 garage sale  记录newsFeed 最后的 tabidx
          lastNewsFeedTabIdx = oldValue;
          lastGarageTabIdx = newValue - newsfeedTabCount;
          currentCatgoryIdx = 1;
          Log.d("-从newsfeed 切换到 garagesale-----------currentCatgoryIdx  $currentCatgoryIdx-------lastNewsFeedTabIdx: $lastNewsFeedTabIdx, lastGarageTabIdx: $lastGarageTabIdx---------------");
        }else {
          lastNewsFeedTabIdx = newValue;
          lastGarageTabIdx = providerCommunityState.lastGarageTabIdx;
        }
      }

      if(oldValue! >= newsfeedTabCount){
        if(newValue < newsfeedTabCount){
          // 由 garage sale 切换到 newsfeed  记录garage sale 最后的 tabidx
          lastGarageTabIdx = oldValue - newsfeedTabCount;
          lastNewsFeedTabIdx = newValue;
          currentCatgoryIdx = 0;
          Log.d("-从garagesale  切换到 newsfeed---------------currentCatgoryIdx  $currentCatgoryIdx------lastNewsFeedTabIdx: $lastNewsFeedTabIdx, lastGarageTabIdx: $lastGarageTabIdx---------------");

        }else {
          lastGarageTabIdx = newValue - newsfeedTabCount;
          lastNewsFeedTabIdx = providerCommunityState.lastNewsfeedTabIdx;
        }
      }

      // Log.d("-666---currentCatgoryIdx----$currentCatgoryIdx-----lastNewsFeedTabIdx: $lastNewsFeedTabIdx, lastGarageTabIdx: $lastGarageTabIdx---------------");
      ref.read(communityVmProvider.notifier).setCurrentCategoryIdx(
        context,
        currentCatgoryIdx,
        lastNewsFeedTabIdx,
        lastGarageTabIdx,
      );
    });

    if(activePageIdx >= newsfeedTabCount){
      // garage sale
      curTabIdx = activePageIdx - newsfeedTabCount;
    }else {
      // news feed
      curTabIdx = activePageIdx;
    }
    return Container(
      width: MediaQuery.of(context).size.width / tabsList.length - 30,
      height: 43,
      padding: const EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
      decoration: index==curTabIdx? BoxDecoration(
        color: index==curTabIdx? 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(
        children: [
          Expanded(
            child: Container(
              alignment: Alignment.center,
              child: MyTextView(
                item,
                fontSize: 16,
                textAlign: TextAlign.center,
                isFontMedium: true,
                textColor: index == curTabIdx ? Colors.white :ColorUtils.string2Color("#000000"),
              ),
            ).onTap((){
              // Log.d("----currentCatgoryIdx----$currentCatgoryIdx-------");
              onClickAction?.call({'currentCatgoryIdx':currentCatgoryIdx, 'tabIdx': index});
            }),
          ),
        ],
      ),
    );
  }

  List<Widget> _buildTabs(BuildContext context, WidgetRef ref, vm){
    int tabsLength = tabsList.length;
    if(tabsLength>0){
      return List.generate(tabsLength, (index) {
        return _buildTabItem(context, ref, vm, tabsList[index], index);
      });
    }else{
      return [
        const SizedBox.shrink()
      ];
    }
  }

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

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