
import 'package:cs_resources/generated/l10n.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/user_evaluate_card_item.dart';
import '../../../constants_services.dart';
import '../../../router/page/services_page_router.dart';
import 'service_evaluate_list_vm.dart';
import '../../../components/status_card_item.dart';

@RoutePage()
class ServiceEvaluateListPage extends HookConsumerWidget {
  final int id;
  final int? cleanServiceTypeId;
  const ServiceEvaluateListPage({
    Key? key,
    required this.id,
    this.cleanServiceTypeId,
  }) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context, required int id, int? cleanServiceTypeId}) {
    if (context != null) {
      context.router.push( ServiceEvaluateListPageRoute(id:id, cleanServiceTypeId:cleanServiceTypeId));
    } else {
      appRouter.push(ServiceEvaluateListPageRoute(id:id, cleanServiceTypeId:cleanServiceTypeId));
    }
  }


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


    useEffect(() {
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => vm.initPageData(id: id));
      return () {
        // 组件卸载时执行
        Log.d("serviceEvaluateList_page 组件卸载时执行");
      };
    }, []);

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        S.current.service_evaluate_list,
        backgroundColor: context.appColors.whiteBG,
      ),
      backgroundColor: DarkThemeUtil.multiColors(context, ColorUtils.string2Color('#F2F3F6'), darkColor: Colors.black)?? Colors.black,
      body: SizedBox(
          width: double.infinity,
          height: double.infinity,
          child: EasyRefresh(
            key: ValueKey('serviceEvaluateList'),
            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:[
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                        (context, index) {
                      return  _buildserviceEvaluateListItem(context, ref, state.list[index], vm,);
                    },
                    childCount: state.list.length,
                  ),
                )
              ],
            ),
          ).marginOnly(left: 15,right: 15,top: 0,bottom: 15)
      ),
    );
  }

  Widget _buildserviceEvaluateListItem(BuildContext context, WidgetRef ref, Map<String, dynamic> item, vm){
    String card_name = item?['account']['name']?? "User Sandy";
    String card_avatar = item?['account']['avatar']?? "";
    int card_score = item?['score']?? 5.0;
    String card_created_at = item?['created_at']?? "14 Oct 2024 15:00";
    String card_content = item?['comment']??"";
    List? card_resources = item.getValue<List>("resources", [])?? [];
    return Container(
      margin: const EdgeInsets.only(top: 10),
      width: double.infinity,
      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: Padding(
        padding: const EdgeInsets.only(left: 15, right:15,top: 17, bottom: 17),
        child: UserEvaluateCardItem(
          key: UniqueKey(),
          name: card_name,
          avator: card_avatar,
          score: card_score.toDouble(),
          time: card_created_at,
          content: card_content,
          contentTextMaxLines: 9999,
          imageUrls: card_resources,
        ),
      ),
    );
  }
}