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: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/widget_export.dart';

import '../../components/newfeed_card_header.dart';
import '../../router/page/community_page_router.dart';
import '../community/community_vm.dart';
import 'garagesale_tabs.dart';

import 'garagesale_vm.dart';


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

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

  Widget _buildTabsSection(BuildContext context, WidgetRef ref, vm){
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.only(left: 15, right: 15,top: 14,bottom: 14),
      child: GaragesaleTabs(
        key: ValueKey(vm.state.activeIndex),
        tabsList: vm.state.tabsList,
      ),
    );
  }

  Widget _buildPostSection(BuildContext context, WidgetRef ref, vm){
    return Container(
      height: 65.5,
      width: double.infinity,
      padding: const EdgeInsets.only(left: 20, right: 20),
      color: Colors.white,
      child: Row(
        children: [
          const MyAssetImage(Assets.communityNesFeed, width: 45,height: 45,),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    // height: 65.5,
                    // color: Colors.blue,
                    child: MyTextView(
                      "Sell Item",
                      textColor: ColorUtils.string2Color('#000000'),
                      fontSize: 15,
                      marginLeft: 15,
                      alignment: Alignment.centerLeft,
                      textAlign: TextAlign.left,
                      backgroundColor: ColorUtils.string2Color('#ffffff'),
                      maxLines: 1,
                      isFontMedium: true,
                    ),
                  ),
                ),
                const MyAssetImage(
                  Assets.communityCamera,
                  width: 21,
                  height: 16.5,
                ),
              ],
            ).onTap((){
              vm.handlerGotoPost(context);
            }),
          ),
        ],
      ),
    );
  }

  Widget _buildNewsItem(BuildContext context, WidgetRef ref, item, vm){
    return Container(
        width: double.infinity,
        // padding: const EdgeInsets.only(left: 15, right: 15,top: 14,bottom: 14),
        color: Colors.yellow,
        child: Container(
          margin: const EdgeInsets.only(left: 15, right: 15,top: 14,bottom: 14),
          color: Colors.white,
          padding: const EdgeInsets.only(left: 15, right: 15,top: 17,bottom: 17),
          height: 280,
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 卡片头部(头像 标题 时间)
                NewsFeedCardHeader(
                  key: UniqueKey(),
                  title: item['title'],
                  avator: item['avator'],
                  time: item['time'],
                ),
                const SizedBox(height: 15),
                // 卡片中间 （文字和图片）
                Expanded(
                  child: NewsFeedCardContent(
                    key: UniqueKey(),
                    content: item['content'],
                    imageUrls: item['imageUrls'],
                  ),
                ),
                const SizedBox(height: 26),
                // // 卡片底部 (点赞 评论 分享)
                NewsFeedCardFooter(
                  key: UniqueKey(),
                  isLike: item['isLike'],
                ),
              ]
          ),
        )
    );
  }

  Widget _buildNesFeedList(BuildContext context, WidgetRef ref, vm){
    final itemList = vm.state.list?? [];
    if(itemList.isEmpty){
      return const Center(child: Text('No Data'));
    }else {
      List itemsList = vm.state.list.toList();
      return ListView.builder(
        key: UniqueKey(),
        itemCount: itemsList.length,
        itemBuilder: (context, index) {
          return _buildNewsItem(context, ref, itemsList[index], vm);
        },
      );
    }
  }


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

    return Scaffold(
      appBar: MyAppBar.searchAppBar(
        context,
        backgroundColor: context.appColors.whiteBG,
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              // do something
            },
          ),
        ],
      ),
      backgroundColor: ColorUtils.string2Color("#F2F3F6"),
      body: Column(
        children: [
          //  tab 分类 （For sale  For Rent）
          _buildTabsSection(context, ref, vm),

          // 发布组件
          _buildPostSection(context, ref, vm),

          NotificationListener<ScrollNotification>(
            onNotification: (ScrollNotification notification) {
              // 检查当前页面是否是可见的
              bool isDownOrUp = notification.metrics.axis == Axis.vertical;
              if (notification is UserScrollNotification) {
                // 检查滚动方向
                switch (notification.direction) {
                  case ScrollDirection.forward:
                    print('Scrolling down');
                    break;
                  case ScrollDirection.reverse:
                    print('Scrolling up');
                    break;
                  case ScrollDirection.idle:
                    print('Scrolling stopped');
                    break;
                }
              } else if (notification is ScrollUpdateNotification) {
                // 检查滚动位置变化
                double currentScrollPosition = notification.metrics.pixels;
                double maxScrollExtent = notification.metrics.maxScrollExtent;

                // 判断是否满足某个条件
                if (currentScrollPosition > 0 && currentScrollPosition < maxScrollExtent) {
                  print('Current scroll position: $currentScrollPosition');
                  // 在这里添加你的条件判断逻辑
                }

                // 只有当上下滚动时才拦截通知
                if (notification.metrics.axis == Axis.vertical) {
                  final tabsRouter = ref.watch(communityVmProvider).tabsRouter;
                }
              }
              return false; // 返回 false 表示不拦截通知
            },
            child: Expanded(
              child: EasyRefresh(
                // 上拉加载
                onLoad: () async{
                  Log.d("----onLoad");
                  vm.onLoadData();
                },
                // 下拉刷新
                onRefresh: () async{
                  Log.d("----onRefresh");
                  vm.refreshListData();
                },
                child: _buildNesFeedList(context, ref, vm),
              ),
            ),
          )
        ],
      ),
    );
  }
}