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/load_state_layout.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/my_appbar.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:widgets/widget_export.dart';

import '../../../components/newfeed_card_header.dart';
import '../../../components/newsfeed_card_content.dart';
import '../../../components/newsfeed_card_footer.dart';
import '../../../router/page/community_page_router.dart';
import 'following_vm.dart';

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

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(followingVmProvider.notifier);
    final state = ref.watch(followingVmProvider);
    useEffect((){
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => vm.initPageData());
      return () {
        // 组件卸载时执行
      };
    }, []);
    return Scaffold(
      // appBar: MyAppBar.appBar(
      //   context,
      //   "following",
      //   backgroundColor: context.appColors.whiteBG,
      // ),
      // backgroundColor: ColorUtils.string2Color("#F2F3F6"),
        body: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            Expanded(
              child: EasyRefresh(
                controller: vm.refreshController,
                key: UniqueKey(),
                onLoad: () async{
                  Log.d("----onLoad");
                  vm.loadMore();
                },
                onRefresh: () async{
                  Log.d("----onRefresh");
                  vm.onRefresh();
                },
                child: LoadStateLayout(
                  state: state.loadingState,
                  errorMessage: state.errorMessage,
                  errorRetry: () {
                    vm.retryRequest();
                  },
                  successSliverWidget: [
                    SliverList(
                      delegate: SliverChildBuilderDelegate(
                              (context, index){
                            return _buildNewsItem(context, ref, state.list![index], vm);
                          },
                          childCount: state.list!.length
                      ),
                    )
                  ],
                ),
              ),
            )
          ],
        )
    );
  }

  Widget _buildNewsItem(BuildContext context, WidgetRef ref, item, vm){
    return Container(
      margin: const EdgeInsets.only(left: 15, right: 15,top: 14,bottom: 14),
      padding: const EdgeInsets.only(left: 15, right: 15,top: 17,bottom: 0),
      // height: 280,
      decoration: BoxDecoration(
          color: context.appColors.textWhite,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: ColorUtils.string2Color("#E4E7EB").withOpacity(0.5),
              spreadRadius: 0,
              blurRadius: 4,
              offset: const Offset(0, 4), // changes position of shadow
            ),
          ]
      ),
      child: Stack(
        children: [
          Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                // 卡片头部(头像 标题 时间)
                Container(
                  child: NewsFeedCardHeader(
                    key: UniqueKey(),
                    title: item['title'],
                    avator: item['avator'],
                    time: item['time'],
                  ),
                ),
                const SizedBox(height: 15),
                // 卡片中间 （文字和图片）
                NewsFeedCardContent(
                  key: UniqueKey(),
                  content: item['content'],
                  imageUrls: item['imageUrls'],
                ),
                const SizedBox(height: 16),
                // // 卡片底部 (点赞 评论 分享)
                Container(
                  decoration: BoxDecoration(
                    // color: Colors.white,
                      border: Border(
                        top: BorderSide(color: context.appColors.dividerDefault, width: 0.5),
                      )
                  ),
                  padding: const EdgeInsets.only(top: 10, bottom: 15),
                  child: NewsFeedCardFooter(
                    key: UniqueKey(),
                    isLike: item['isLike'],
                    onLike: (){
                      vm.handlerClickActionBtn('like', item);
                    },
                    onComment: (){
                      vm.handlerClickActionBtn('comments', item);
                    },
                    onShare: (){
                      vm.handlerClickActionBtn('share', item);
                    },
                  ),
                ),
              ]
          ),
          // 右上角 关注/取消关注 按钮
          Visibility(
            visible: !item['isFollow'],
            child: Positioned(
                right: 10,
                top: -5,
                child: Container(
                  width: 83.5,
                  height: 45.5,
                  alignment: Alignment.center,
                  // decoration: BoxDecoration(
                  //   color:  ColorUtils.string2Color('#4161D0'),
                  //   borderRadius: BorderRadius.circular(5),
                  // ),
                  child: MyButton(
                    text: '+Follow',
                    textColor: Colors.white,
                    backgroundColor: ColorUtils.string2Color('#4161D0'),
                    radius: 8,
                    minHeight: 27.5,
                    padding: const EdgeInsets.only(left: 5, right: 5,top:9,bottom:9),
                    fontWeight: FontWeight.w400,
                    fontSize: 14,
                    onPressed: (){
                      // Navigator.pop(context);
                    },
                  ),
                )
            ),
          )
        ],
      ),
    ).constrained(
      width: double.infinity,
      // height: 580,
      // minHeight: 300,
    ).onTap((){
      vm.handlerClickActionBtn(null, item);
    });
  }
}