import 'package:cpt_community/modules/my_posts/my_posts_vm.dart';
import 'package:cpt_community/router/page/community_page_router.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/log_utils.dart';
import 'package:widgets/my_appbar.dart';
import '../my_posts/my_posts_forrent/my_posts_forrent_page.dart';
import '../my_posts/my_posts_forsale/my_posts_forsale_page.dart';
import '../my_posts/my_posts_newsfeed/my_posts_newsfeed_page.dart';
import 'my_posts_tabs.dart';


final myPostsPageTabsRouterKey = GlobalKey<AutoTabsRouterState>();

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

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

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

    useEffect((){
      Log.d("mypost page initState");
      // 延迟监听
      WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
        if(myPostsPageTabsRouterKey.currentState?.controller != null){
          myPostsPageTabsRouterKey.currentState?.controller?.addListener((){
            vm.tabsRouterChange();
          });
        }
      });

      return (){
        myPostsPageTabsRouterKey.currentState?.controller?.removeListener(vm.tabsRouterChange);
      };
    },[]);

    // // 创建 GlobalKey
    // final GlobalKey<AutoTabsRouterState> _tabsRouterKey = GlobalKey<AutoTabsRouterState>();
    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        "My Posts",
        backgroundColor: context.appColors.backgroundWhite,
      ),
      backgroundColor: context.appColors.backgroundDefault,
      body: Column(
        children: [
          Expanded(
            child: AutoTabsRouter.pageView(
              key: myPostsPageTabsRouterKey,
              routes: const [
                MyPostsNewsfeedPageRoute(),
                MyPostsForSalePageRoute(),
                MyPostsForRentPageRoute()
              ],
              builder: (context, child, pageController) {
                final tabsRouter = AutoTabsRouter.of(context);
                return Column(
                  children: [
                    // tab 标签
                    _buildHeaderTabs(context, ref, state),
                    Expanded(
                      child: child,
                    )
                  ],
                );
              },
            )
          )
        ],
      ),
    );
  }


  Widget _buildHeaderTabs(BuildContext context, WidgetRef ref, state) {
    final vm = ref.read(myPostsVmProvider.notifier);
    return Container(
      color: context.appColors.textWhite,
      child: MyPostsTab(
        key: UniqueKey(),
        tabsList: state.tabsList,
        tabsRouter: null,
        onClickAction:(activeTabIdx){
          Log.d("点击的tab index: $activeTabIdx");
          vm.handlerChangeTab(activeTabIdx, null);
        },
      ),
    );
  }
}