import 'package:cs_resources/generated/assets.dart';
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:plugin_basic/provider/app_config/app_config_service.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/color_utils.dart';
import 'package:shared/utils/ext_dart.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:shared/utils/screen_util.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/utils/dark_theme_util.dart';
import 'package:widgets/widget_export.dart';

import '../../../components/garage_card.dart';
import '../../../components/newfeed_card_header.dart';
import '../../../router/page/community_page_router.dart';
import 'for_rent_vm.dart';

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

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


  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(forrentVmProvider.notifier);
    final state = ref.watch(forrentVmProvider);
    // final appConfigState = ref.watch(appConfigServiceProvider);

    useEffect(() {
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => vm.initPageData());
      return () {
        // 组件卸载时执行
        Log.d("garage_forsale_page 组件卸载时执行");
      };
    }, []);
    return Scaffold(
      // appBar: MyAppBar.appBar(
      //   context,
      //   "Forrent",
      //   backgroundColor: context.appColors.whiteBG,
      // ),
        backgroundColor: DarkThemeUtil.multiColors(context, ColorUtils.string2Color("#F2F3F6"), darkColor: Colors.black),
      body: SizedBox(
          width: double.infinity,
          height: double.infinity,
          child: EasyRefresh(
            key: ValueKey('forrent'),
            controller: vm.refreshController,
            // 上拉加载
            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:[
                SliverGrid(
                  gridDelegate:  SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2, // 每行显示两个项目
                    mainAxisSpacing: 15,
                    crossAxisSpacing: 15,
                    // childAspectRatio: 166.5/214, // 宽高比
                    // childAspectRatio:  166.5/214 * ScreenUtil.getAdapterSizeCtx(context, 166.5/214), // 宽高比
                    childAspectRatio: 166.5/214 * ((166.5/214).ap), //
                  ),
                  delegate: SliverChildBuilderDelegate(
                        (context, index) {
                      return  _buildForrentItem(context, ref, state.list[index], vm).onTap((){
                        vm.handlerGotoDetail(context: context, id: state.list[index]['id'], type: 'forRent');
                      });
                    },
                    childCount: state.list.length,
                  ),
                ),
              ],
            ),
          ).marginOnly(left: 15,right: 15,top: 15,bottom: 15)
      ),
    );
  }

  Widget _buildForrentItem(BuildContext context, WidgetRef ref, item, vm){
    return SizedBox(
      width: double.infinity,
      child: Container(
        decoration: BoxDecoration(
          color: context.appColors.whiteBG,
          borderRadius: BorderRadius.circular(8),
          boxShadow: [
            BoxShadow(
              color: DarkThemeUtil.multiColors(context, ColorUtils.string2Color('#E5E5E5'), darkColor: Colors.transparent)?? Colors.transparent,
              offset: const Offset(0, 2),
              blurRadius: 8,
            ),
          ],
        ),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            children: [
              // 卡片头部(头像 标题 时间)
              Expanded(
                child: GarageCard(
                    key: UniqueKey(),
                    itemObj: item.cast<String, dynamic>(),
                    onClickColleciotn: (dynamic collectionValue) async {
                      Log.d("点击了收藏按钮  --id:${item['id']}- $collectionValue");
                      int id = item['id'];
                      return await vm.handlerClickCollection(id, collectionValue);
                    }
                ),
              ),
            ]
        ),
      ),
    );
  }
}