import 'package:cpt_payment/modules/payment_success/payment_success_state.dart';
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/material.dart';
import 'package:auto_route/auto_route.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:widgets/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/utils/dark_theme_util.dart';

import '../../router/page/payment_page_router.dart';
import 'payment_success_view_model.dart';

@RoutePage()
class PaymentSuccessPage extends HookConsumerWidget {
  final String? orderId;

  const PaymentSuccessPage({
    Key? key,
    @PathParam() required this.orderId,
  }) : super(key: key);

  //启动并关闭其他栈
  static void startWithPop({required String? orderId}) {
    appRouter.pushAndPopUntil(
      PaymentSuccessPageRoute(orderId: orderId),
      predicate: (route) {
        return route.settings.name == 'PaymentPageRoute';
      },
    );
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.read(paymentSuccessViewModelProvider.notifier);
    final PaymentSuccessState state = ref.watch(paymentSuccessViewModelProvider);

    useEffect(() {
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() {
        viewModel.fetchFormDetail(orderId);
      });
      return () {
        // 组件卸载时执行
      };
    }, []);

    return Scaffold(
      appBar: MyAppBar.appBar(context, state?.paymentDetail?.title ?? "Payment Detail"),
      backgroundColor: context.appColors.backgroundWhite,
      body: SizedBox(
        width: double.infinity,
        child: Column(
          children: [
            //成功图片
            MyAssetImage(
              Assets.facilityPaymentSuccessIcon,
              width: 54,
              height: 54,
              color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary, darkColor: Colors.white),
            ).marginOnly(top: 11, bottom: 13),

            //支付成功
            MyTextView(
              S.current.payment_successful,
              fontSize: 18,
              marginBottom: 3,
              isFontMedium: true,
              textColor: context.appColors.textPrimary,
            ),

            //支付金额
            MyTextView(
              S.current.fee_paid,
              marginTop: 40,
              fontSize: 15,
              isFontRegular: true,
              textColor: context.appColors.textBlack,
            ),
            MyTextView(
              "\$${state.paymentDetail?.totalAmount ?? ""}",
              fontSize: 15,
              isFontRegular: true,
              textColor: context.appColors.textPrimary,
            ),

            // //付款类型与时间
            // Row(
            //   mainAxisSize: MainAxisSize.min,
            //   children: [
            //     MyTextView(
            //       "Master card ending",
            //       fontSize: 15,
            //       isFontRegular: true,
            //       textColor: context.appColors.textBlack,
            //     ),
            //     MyTextView(
            //       "9423",
            //       fontSize: 15,
            //       isFontMedium: true,
            //       textColor: context.appColors.textBlack,
            //     ),
            //   ],
            // ).marginOnly(top: 12),

            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                MyTextView(
                  S.current.paid_on,
                  fontSize: 15,
                  isFontRegular: true,
                  textColor: context.appColors.textBlack,
                ),
                MyTextView(
                  state.paymentDetail?.paidAt ?? "",
                  fontSize: 15,
                  isFontMedium: true,
                  textColor: context.appColors.textBlack,
                ),
              ],
            ).marginOnly(top: 5),

            const SizedBox(height: 23),
          ],
        ),
      ),
    );
  }
}