import 'package:cs_resources/generated/assets.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/componentRouter/component_service_manager.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/utils/dark_theme_util.dart';

import '../apply/form_terms_page.dart';
import '../form/form_types.dart';
import 'form_detail_view_model.dart';

class DetailProcessingFragment extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(formDetailViewModelProvider);
    final viewModel = ref.read(formDetailViewModelProvider.notifier);

    return SizedBox(
      width: double.infinity,
      height: double.infinity,
      child: Column(
        children: [
          SingleChildScrollView(
            scrollDirection: Axis.vertical,
            physics: const BouncingScrollPhysics(),
            child: Container(
              width: double.infinity,
              color: context.appColors.whiteBG,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  //状态
                  MyTextView(
                    state.forDetail?.order?.refundStatus != 0
                        ? S.current.refunded //已退款
                        : state.forDetail?.order?.paymentStatus != 1
                            ? S.current.unpaid //未支付
                            : S.current.processing,
                    marginTop: 17,
                    textColor: state.forDetail?.order?.refundStatus != 0
                        ? context.appColors.textDisEnableGray //已退款
                        : state.forDetail?.order?.paymentStatus != 1
                            ? context.appColors.deleteRed //未支付
                            : context.appColors.textPrimary,
                    fontSize: 24,
                    isFontMedium: true,
                  ),
                  MyTextView(
                    S.current.status,
                    marginTop: 12,
                    textColor: context.appColors.textBlack,
                    fontSize: 17,
                    isFontRegular: true,
                  ),

                  //退款的金额和待支付的金额展示
                  Visibility(
                    visible: state.forDetail?.order?.refundStatus != 0 || state.forDetail?.order?.paymentStatus != 1,
                    child: MyTextView(
                      "\$${state.forDetail?.order?.totalAmount ?? "-"}",
                      marginTop: 15,
                      textColor: context.appColors.textPrimary,
                      fontSize: 24,
                      isFontMedium: true,
                    ),
                  ),

                  //Send On时间
                  RichText(
                    text: TextSpan(
                      style: TextStyle(fontSize: 15, fontWeight: FontWeight.w400, color: context.appColors.textBlack),
                      children: <TextSpan>[
                        TextSpan(
                          text: S.current.send_on_sometime(' '),
                        ),
                        TextSpan(
                          text: state.forDetail?.createdAt ?? "-",
                          style: TextStyle(fontSize: 15, fontWeight: FontWeight.w500, color: context.appColors.textBlack),
                        ),
                      ],
                    ),
                  ).marginOnly(top: 12, bottom: 28),

                  //图片
                  Visibility(
                      visible: state.forDetail?.order?.refundStatus == 0 && state.forDetail?.order?.paymentStatus == 1,
                      child: MyAssetImage(
                        Assets.formDetailProcessingImg,
                        width: 40,
                        height: 51.5,
                        color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary, darkColor: Colors.white),
                      )),

                  //提示文本
                  Visibility(
                    visible: state.forDetail?.order?.refundStatus == 0 && state.forDetail?.order?.paymentStatus == 1,
                    child: MyTextView(
                      S.current.processing_in_progress,
                      marginTop: 15,
                      marginBottom: 34,
                      marginLeft: 50,
                      marginRight: 50,
                      textAlign: TextAlign.center,
                      textColor: context.appColors.textBlack,
                      fontSize: 15,
                      isFontRegular: true,
                    ),
                  ),

                  //分割线
                  Container(
                    color: context.appColors.backgroundDark,
                    height: 10,
                  ),

                  Align(
                    alignment: Alignment.centerLeft, // 左对齐
                    child: MyTextView(
                      FormTypes.iconMap[state.typeId]?['name'],
                      marginTop: 22,
                      marginBottom: 12,
                      marginLeft: 18,
                      textColor: context.appColors.textPrimary,
                      fontSize: 17,
                      isFontMedium: true,
                    ),
                  ),

                  Align(
                    alignment: Alignment.centerLeft, // 左对齐
                    child: MyTextView(
                      state.forDetail?.content?.typeOfApplication ?? "-",
                      marginBottom: 22,
                      marginLeft: 18,
                      textColor: context.appColors.textBlack,
                      fontSize: 15,
                      isFontMedium: true,
                    ),
                  ),
                ],
              ),
            ),
          ).expanded(),
          Row(
            children: [
              MyButton(
                onPressed: () {
                  ComponentServiceManager().mainService.startFeedbackCreatePage(context: context);
                },
                text: S.current.send_feedback,
                textColor: Colors.white,
                fontSize: 15,
                fontWeight: FontWeight.w400,
                radius: 7,
                backgroundColor: context.appColors.btnBgDefault,
              ).expanded(),
              const SizedBox(width: 10),
              MyButton(
                onPressed: () {
                  FormTermsPage.startInstance(
                    formType: state.typeId ?? "",
                    estateFormId: state.estateFormId ?? "",
                    formItem: null,
                    enableEdit: false,
                    description: state.forDetail?.description,
                    formContent: state.forDetail?.content,
                  );
                },
                text: S.current.view_application,
                textColor: Colors.white,
                fontSize: 15,
                fontWeight: FontWeight.w400,
                radius: 7,
                backgroundColor: context.appColors.greenBG,
              ).expanded(),
            ],
          ).marginOnly(left: 15, right: 15),
          Visibility(
            visible: state.forDetail?.order?.refundStatus != 0 || state.forDetail?.order?.paymentStatus != 1,
            child: MyButton(
              onPressed: () {
                viewModel.doPaymentOrder(state.forDetail?.order?.id ?? "");
              },
              text: S.current.payment,
              textColor: Colors.white,
              fontSize: 15,
              fontWeight: FontWeight.w400,
              radius: 7,
              backgroundColor: context.appColors.orangeBG,
            ).marginOnly(top: 6, left: 15, right: 15),
          ),
          const SizedBox(height: 17.5),
        ],
      ),
    );
  }
}