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_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';

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

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

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

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

    return Scaffold(
      appBar: MyAppBar.appBar(context, "付款的标题"),
      backgroundColor: context.appColors.whiteBG,
      body: Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SingleChildScrollView(
            scrollDirection: Axis.vertical,
            physics: const BouncingScrollPhysics(),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                //金额
                Row(
                  children: [
                    const MyAssetImage(Assets.paymentInfoDetails, width: 27, height: 27),
                    MyTextView(
                      S.current.payment_details,
                      textColor: context.appColors.textBlack,
                      fontSize: 17,
                      marginLeft: 14,
                      isFontMedium: true,
                    ).expanded(),
                  ],
                ).marginOnly(top: 15, left: 15, right: 15),

                Row(
                  children: [
                    MyTextView(
                      "SGD",
                      textColor: context.appColors.textBlack,
                      fontSize: 18,
                      isFontRegular: true,
                    ),
                    MyTextView(
                      "\$21.80",
                      textColor: context.appColors.textPrimary,
                      fontSize: 22,
                      marginLeft: 12,
                      isFontMedium: true,
                    ).expanded(),
                  ],
                ).marginOnly(top: 20, left: 15, right: 15),

                Container(
                  height: 0.5,
                  margin: const EdgeInsets.only(top: 22, bottom: 13.5, left: 15, right: 15),
                  color: context.appColors.dividerDefault,
                ),

                // DESC
                Row(
                  children: [
                    const MyAssetImage(Assets.paymentInfoNotes, width: 27, height: 27),
                    MyTextView(
                      S.current.notes_to_recipient,
                      textColor: context.appColors.textBlack,
                      fontSize: 17,
                      marginLeft: 14,
                      isFontMedium: true,
                    ).expanded(),
                  ],
                ).marginOnly(left: 15, right: 15),

                MyTextView(
                  "The money has already been paid",
                  textColor: context.appColors.textPrimary,
                  fontSize: 16,
                  marginTop: 15,
                  marginBottom: 20,
                  marginLeft: 15,
                  marginRight: 15,
                  isFontRegular: true,
                ),

                _paymentInfo(context,ref),
              ],
            ),
          ).expanded(),

          // 底部按钮
          MyButton(
            onPressed: viewModel.doPayment,
            text: S.current.proceed_with_payment,
            textColor: Colors.white,
            backgroundColor: context.appColors.btnBgDefault,
            fontWeight: FontWeight.w500,
            type: ClickType.throttle,
            fontSize: 16,
            minHeight: 50,
            radius: 0,
          ).marginOnly(top: 15),
        ],
      ),
    );
  }

  //底部的支付信息
  Widget _paymentInfo(BuildContext context,WidgetRef ref) {
    final viewModel = ref.watch(paymentConfirmViewModelProvider.notifier);

    return Container(
        height: 75,
        padding: const EdgeInsets.symmetric(horizontal: 20),
        color: context.appColors.backgroundDark,
        child: Row(
          children: [
            const MyAssetImage(
              Assets.paymentMasterCardIcon,
              height: 34,
              width: 56,
            ),
            MyTextView(
              "Ending 9423",
              marginLeft: 15,
              marginRight: 15,
              textColor: context.appColors.textBlack,
              fontSize: 15,
              isFontMedium: true,
            ).expanded(),
            MyTextView(
              S.current.change,
              textColor: Colors.white,
              backgroundColor: context.appColors.btnBgDefault,
              paddingRight: 16,
              paddingLeft: 16,
              paddingTop: 8,
              onClick: viewModel.gotoChooseCardPage,
              paddingBottom: 8,
              cornerRadius: 7,
              fontSize: 15,
              isFontMedium: true,
            )
          ],
        ));
  }
}