import 'package:domain/entity/service_in_progress_entity.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/widget_export.dart';

import '../../../components/repair_status_card_item.dart';
import '../../../constants_services.dart';
import '../../../router/page/services_page_router.dart';
import 'history_vm.dart';
import '../../../components/status_card_item.dart';

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

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


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

    String cleanServiceType = servicesConstants.servicesType['houseCleaning']?['code'];
    int serviceStatusCode = servicesConstants.servicesStatus['2']?['code'];


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

    return Scaffold(
      // appBar: MyAppBar.appBar(
      //   context,
      //   "History",
      //   backgroundColor: context.appColors.whiteBG,
      // ),
      backgroundColor: ColorUtils.string2Color("#F2F3F6"),
      body: SizedBox(
          width: double.infinity,
          height: double.infinity,
          child: EasyRefresh(
            key: ValueKey('history'),
            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 _buildRepairHistoryItem(
                        context,
                        ref,
                        state.list[index],
                        vm,
                        cleanServiceType,
                        serviceStatusCode,
                      ).onTap(() {
                      });
                    },
                    childCount: state.list.length,
                  ),
                )
              ],
            ),
          ).marginOnly(left: 15, right: 15, top: 0, bottom: 15)),
    );
  }

  Widget _buildRepairHistoryItem(BuildContext context, WidgetRef ref, ServiceInProgressList item, vm, String cleanServiceType, int serviceStatusCode){
    return Container(
      margin: const EdgeInsets.only(top: 10),
      width: double.infinity,
      decoration: BoxDecoration(
        color: context.appColors.whiteBG,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: ColorUtils.string2Color('#E5E5E5'),
            offset: const Offset(0, 2),
            blurRadius: 8,
          ),
        ],
      ),
      child: Container(
        width: double.infinity,
        height: 140,
        child: Padding(
          padding: const EdgeInsets.only(
              left: 18.0, right: 18.0, top: 10.0, bottom: 10.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                  child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 标题 和状态
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      // 标题
                      Expanded(
                        child: MyTextView(
                          item?.service?.name ?? "-",
                          fontSize: 16,
                          maxLines: 1,
                          isFontBold: true,
                          textAlign: TextAlign.left,
                        ),
                      ),
                      // 状态
                      MyTextView(
                        item?.orderStatus ?? "-",
                        fontSize: 14,
                        maxLines: 1,
                        isFontRegular: true,
                        textAlign: TextAlign.left,
                        textColor: context.appColors.textPrimary,
                      ),
                    ],
                  ),
                  // 公司名称
                  MyTextView(
                    item?.merchant?.name ?? "-",
                    fontSize: 14,
                    maxLines: 1,
                    isFontRegular: true,
                    textAlign: TextAlign.left,
                    marginTop: 6,
                  ),
                  const SizedBox(
                    height: 5,
                  ),
                  // visit time
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      MyTextView(
                        item?.merchantNotes ?? "-",
                        fontSize: 14,
                        maxLines: 1,
                        isFontRegular: true,
                        textAlign: TextAlign.left,
                        textColor: context.appColors.textDarkGray,
                      ),
                    ],
                  ),
                ],
              )),
            ],
          ),
        ),
      ),
    );
  }
}
