import 'package:cpt_community/components/custom_tabs.dart';
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:flutter/material.dart';
import 'package:auto_route/auto_route.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_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 'newsfeed_vm.dart';

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

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

  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: CustomTabs(tabsList: vm.state.tabsList, activeIndex: vm.state.activeIndex),
    );
  }

  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: Container(
              // height: 65.5,
              // color: Colors.blue,
              child: MyTextView(
                "What’s on your mind?",
                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();
          }),
        ],
      ),
    );
  }

  Widget _buildNewsItem(BuildContext context, WidgetRef ref, item, vm){
    print("1111111${item}");
    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(
              title: item['title'],
              avator: item['avator'],
              time: item['time'],
            ),
            const SizedBox(height: 15),
            // 卡片中间 （文字和图片）
            Expanded(
              child: NewsFeedCardContent(
                content: item['content'],
                imageUrls: item['imageUrls'],
              ),
            ),
            const SizedBox(height: 26),
            // // 卡片底部 (点赞 评论 分享)
            NewsFeedCardFooter(
              isLike: item['isLike'],
            ),
          ]
        ),
      )
    );
  }

  Widget _buildNesFeedList(BuildContext context, WidgetRef ref, vm){
    // return Container(
    //   height: 100,
    //   color: Colors.blue,
    // );
    // List items = List.generate(20, (index) => "Item $index");
    // List items = _vm.state.list.fromMap();
    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(
        itemCount: itemsList.length,
        itemBuilder: (context, index) {
          return _buildNewsItem(context, ref, itemsList[index], vm);
        },
      );
    }
  }


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

    return Scaffold(
      backgroundColor: ColorUtils.string2Color("#F2F3F6"),
      body: Column(
          children: [
            _buildTabsSection(context, ref, vm),

            _buildPostSection(context, ref, vm),

            // Expanded(
            //   child: EasyRefresh(
            //     // 上拉加载
            //     onLoad: () async{
            //       Log.d("----onLoad");
            //       vm.onLoadData();
            //     },
            //     // 下拉刷新
            //     onRefresh: () async{
            //       Log.d("----onRefresh");
            //       vm.refreshListData();
            //     },
            //     child: _buildNesFeedList(context, ref, vm),
            //   ),
            // )
            Expanded(
              child: _buildNesFeedList(context, ref, vm),
            )
          ],
      ),
    );
  }
}