import 'package:cpt_community/components/newsfeed_card_content.dart';
import 'package:cpt_community/components/newsfeed_card_footer.dart';
import 'package:cs_resources/generated/assets.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/rendering.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/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/search_app_bar.dart';
import 'package:widgets/widget_export.dart';

import '../../components/newfeed_card_header.dart';
import '../../router/page/community_page_router.dart';
import 'my_following_vm.dart';

import 'my_following_tabs.dart';

import 'my_following_vm.dart';


final myFollowingPageTabsRouterKey = GlobalKey<AutoTabsRouterState>();

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

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

  Widget _buildTabsSection(BuildContext context, WidgetRef ref, tabsRouter, state){
    final vm = ref.read(myFollowingVmProvider.notifier);
    return Container(
      width: double.infinity,
      child: MyFollowingTabs(
          key: UniqueKey(),
          tabsList: state.tabsList,
          tabsRouter: tabsRouter,
          margin: EdgeInsets.only(top: 14,bottom: 12, left: 20, right: 20),
          onClickAction:(activeTabIdx){
            vm.handlerChangeTab.call(activeTabIdx, tabsRouter);
          }
      ),
    );
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(myFollowingVmProvider.notifier);
    final state = ref.watch(myFollowingVmProvider);


    useEffect((){
      // 延迟监听
      WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
        if(myFollowingPageTabsRouterKey.currentState?.controller != null){
          myFollowingPageTabsRouterKey.currentState?.controller?.addListener((){
            vm.tabsRouterChange();
          });
        }
      });

      return (){
        Log.d("My_followingPage dispose");
        myFollowingPageTabsRouterKey.currentState?.controller?.removeListener(vm.tabsRouterChange);
      };
    },[]);


    PreferredSizeWidget _buildPageAppBar(BuildContext context, WidgetRef ref, state){
      if(state.currentPageViewIdx == 0){
        return  state.followPageIsSearchBarStatus!? MyAppBar.searchAppBar(context, backgroundColor: context.appColors.backgroundWhite): MyAppBar.appBar(
          context,
          state.currentPageViewIdx == 0 ? "My Follow" : "My Follower",
          backgroundColor: context.appColors.backgroundWhite,
        );
      }else {
        return state.followerPageIsSearchBarStatus!? MyAppBar.searchAppBar(context, backgroundColor: context.appColors.backgroundWhite): MyAppBar.appBar(
          context,
          state.currentPageViewIdx == 0 ? "My Follow" : "My Follower",
          backgroundColor: context.appColors.backgroundWhite,
        );
      }
    }

    return Scaffold(
      appBar: _buildPageAppBar(context, ref, state),
      // appBar: MyAppBar.searchAppBar(context),
      backgroundColor: ColorUtils.string2Color("#F2F3F6"),
      body: Column(
        children:[
          Expanded(
            child: AutoTabsRouter.pageView(
              key: myFollowingPageTabsRouterKey,
              routes: const [
                MyFollowPageRoute(),
                MyFollowerPageRoute(),
              ],
              builder: (context, child, animation) {
                final tabsRouter = AutoTabsRouter.of(context);
                return Column(
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    _buildTabsSection(context, ref, tabsRouter, state),
                    Expanded(
                      child: child,
                    )
                  ],
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}