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: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 '../../router/page/payment_page_router.dart';
import 'payment_success_view_model.dart';

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


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

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

    return Scaffold(
      appBar: MyAppBar.appBar(context, "付款的标题"),
      backgroundColor: context.appColors.whiteBG,
      body: SizedBox(
        width: double.infinity,
        child: Column(
          children: [
            //成功图片
            const MyAssetImage(
              Assets.facilityPaymentSuccessIcon,
              width: 54,
              height: 54,
            ).marginOnly(top: 11, bottom: 13),

            //支付成功
            MyTextView(
              S.current.booking_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(
              "\$10.80",
              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(
                  "24 Oct 2023 at 02:19 PM",
                  fontSize: 15,
                  isFontMedium: true,
                  textColor: context.appColors.textBlack,
                ),
              ],
            ).marginOnly(top: 5),

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