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 '../garage/garage_vm.dart';

import 'garage_tabs.dart';

import 'garage_vm.dart';


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

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

  Widget _buildTabsSection(BuildContext context, WidgetRef ref, tabsRouter){
    final vm = ref.read(garageVmProvider.notifier);
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.only(left: 15, right: 15,top: 14,bottom: 14),
      child: GarageTabs(
        key: UniqueKey(),
        tabsList: vm.state.tabsList,
        tabsRouter: tabsRouter,
        onClickAction:(activeTabIdx){
          vm.handlerChangeTab(activeTabIdx, tabsRouter);
        }
      ),
    );
  }

  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'],
                ),
              ]
          ),
        )
    );
  }
  

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

    return Scaffold(
      appBar: MyAppBar.searchAppBar(
        context,
        backgroundColor: context.appColors.whiteBG,
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              // do something
              vm.handlerChooseCategory(context);
            },
          ),
        ],
      ),
      backgroundColor: ColorUtils.string2Color("#F2F3F6"),
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            SliverToBoxAdapter(
              child: Consumer(
                builder: (context, ref, _) {
                  return _buildTopSection(context, ref, vm);
                },
              ),
            ),
          ];
        },
        body: NotificationListener<ScrollNotification>(
          onNotification: (ScrollNotification notification) {
            // 是否拦截滚动  false 表示不拦截通知
            // return _isPreventScroll(notification, ref);
            return false;
          },
          child: AutoTabsRouter.pageView(
            key: UniqueKey(),
            routes: const [
              ForsalePageRoute(),
              ForrentPageRoute(),
            ],
            builder: (context, child, animation) {
              final tabsRouter = AutoTabsRouter.of(context);
              return Column(
                mainAxisSize: MainAxisSize.max,
                children: [
                  //  garagesale tab 分类 （For sale  For Rent）
                  _buildTabsSection(context, ref, tabsRouter),
                  // 发布 garage sale 组件
                  _buildPostSection(context, ref, vm),
                  Expanded(
                    child: child,
                  )
                ],
              );
            },
          ),
        ),
      ),
      // body: AutoTabsRouter.pageView(
      //     key: UniqueKey(),
      //     routes: const [
      //       ForsalePageRoute(),
      //       ForrentPageRoute(),
      //     ],
      //     builder: (context, child, animation) {
      //       final tabsRouter = AutoTabsRouter.of(context);
      //       return Column(
      //         mainAxisSize: MainAxisSize.max,
      //         children: [
      //           //  garagesale tab 分类 （For sale  For Rent）
      //           _buildTabsSection(context, ref, tabsRouter),
      //           // 发布 garage sale 组件
      //           _buildPostSection(context, ref, vm),
      //           Expanded(
      //             child: child,
      //           )
      //         ],
      //       );
      //     },
      // )
    );
  }

  Widget _buildTopSection(BuildContext context, WidgetRef ref, vm) {
    final topSectionsData = vm.topSectionsData;
    int curTagIdx = 1;
    return Container(
      color: Colors.white,
      padding: const EdgeInsets.only(top: 23, bottom: 30),
      child: Center(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: List.generate(topSectionsData.length, (index) {
            final item = topSectionsData[index];
            return Flexible(
              flex: 1,
              child: Column(
                children: [
                  Container(
                    width: MediaQuery.of(context).size.width / topSectionsData.length - 36,
                    height: 70,
                    decoration: BoxDecoration(
                      // color: currentTabIdx == index ? ColorUtils.string2Color('#E6F2FF') : Colors.white,
                      shape: BoxShape.circle, // 设置为圆形
                      boxShadow: index == curTagIdx ? [
                        BoxShadow(
                          color: context.appColors.tabLightBlueShadow, // 设置阴影颜色
                          blurRadius: 5, // 设置模糊半径
                          spreadRadius: 0.05, // 控制阴影扩散
                          offset: const Offset(0, 4), // 设置阴影偏移量
                        ),                          ] : [],// 未选中时无阴影,
                    ),
                    child: MyAssetImage(
                      item['icon'],
                      width: MediaQuery.of(context).size.width / topSectionsData.length - 36,
                      height: 70,
                    ).onTap(() {
                      vm.handlerChangeCommunityType(context,index);
                    },
                      type: ClickType.throttle,
                    ),
                  ),
                  SizedBox.fromSize(size: const Size(0, 9)),
                  MyTextView(
                    item['title'],
                    fontSize: 15,
                    textColor: index == curTagIdx ? ColorUtils.string2Color('#4161D0'):Colors.black,
                    textAlign: TextAlign.center,
                    isFontMedium: true,
                  ),
                ],
              ),
            ).marginOnly(left: 18, right: 18, top: 10, bottom: 10);
          }),
        ),
      ),
    );
  }
}