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 'package:widgets/utils/dark_theme_util.dart';

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

@RoutePage()
class PaymentConfirmPage extends HookConsumerWidget {
  final String? title;
  final String? orderId;
  final String? amount;
  final String? deposit;

  const PaymentConfirmPage({
    Key? key,
    @PathParam() required this.title,
    @PathParam() required this.orderId,
    @PathParam() required this.amount,
    @PathParam() this.deposit,
  }) : super(key: key);

  //启动当前页面
  static void startInstance({
    BuildContext? context,
    required String? title,
    required String? orderId,
    required String? amount,
    String? deposit,
  }) {
    if (context != null) {
      context.router.push(PaymentConfirmPageRoute(title: title, orderId: orderId, amount: amount, deposit: deposit));
    } else {
      appRouter.push(PaymentConfirmPageRoute(title: title, orderId: orderId, amount: amount, deposit: deposit));
    }
  }

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

    return Scaffold(
      appBar: MyAppBar.appBar(context, title ?? "Payment"),
      backgroundColor: context.appColors.backgroundWhite,
      body: Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SingleChildScrollView(
            scrollDirection: Axis.vertical,
            physics: const BouncingScrollPhysics(),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                //支付
                Visibility(
                  visible: true,
                  child: Row(
                    children: [
                      MyAssetImage(
                        Assets.paymentInfoDetails,
                        width: 27,
                        height: 27,
                        color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary, darkColor: Colors.white),
                      ),
                      MyTextView(
                        S.current.payment,
                        textColor: context.appColors.textBlack,
                        fontSize: 17,
                        marginLeft: 14,
                        isFontMedium: true,
                      ).expanded(),
                    ],
                  ).marginOnly(top: 15, left: 15, right: 15),
                ),

                //支付金额
                Visibility(
                  visible: true,
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      MyTextView(
                        S.current.fee,
                        textColor: context.appColors.textBlack,
                        fontSize: 18,
                        isFontRegular: true,
                      ),
                      const Spacer(),
                      MyTextView(
                        "SGD",
                        textColor: context.appColors.textBlack,
                        fontSize: 18,
                        isFontRegular: true,
                      ),
                      MyTextView(
                        "\$${amount ?? "0.00"}",
                        textColor: context.appColors.textPrimary,
                        fontSize: 22,
                        marginLeft: 8,
                        isFontMedium: true,
                      ),
                    ],
                  ).marginOnly(top: 20, left: 15, right: 15, bottom: 20),
                ),

                //分割线
                Visibility(
                  visible: deposit != null && int.parse(deposit!) > 0,
                  child: Divider(
                    color: context.appColors.dividerDefault,
                    height: 0.5,
                  ),
                ),

                //押金
                Visibility(
                  visible: deposit != null && int.parse(deposit!) > 0,
                  child: Row(
                    children: [
                      MyAssetImage(
                        Assets.paymentInfoDetails,
                        width: 27,
                        height: 27,
                        color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary, darkColor: Colors.white),
                      ),
                      MyTextView(
                        S.current.deposit,
                        textColor: context.appColors.textBlack,
                        fontSize: 17,
                        marginLeft: 14,
                        isFontMedium: true,
                      ).expanded(),
                    ],
                  ).marginOnly(top: 15, left: 15, right: 15),
                ),

                //押金金额
                Visibility(
                  visible: deposit != null && int.parse(deposit!) > 0,
                  child: Row(
                    children: [
                      MyTextView(
                        S.current.deposit_hold,
                        textColor: context.appColors.textBlack,
                        fontSize: 18,
                        isFontRegular: true,
                      ),
                      const Spacer(),
                      MyTextView(
                        "SGD",
                        textColor: context.appColors.textBlack,
                        fontSize: 18,
                        isFontRegular: true,
                      ),
                      MyTextView(
                        "\$${deposit ?? "0.00"}",
                        textColor: context.appColors.textPrimary,
                        fontSize: 22,
                        marginLeft: 8,
                        isFontMedium: true,
                      ),
                    ],
                  ).marginOnly(top: 20, left: 15, right: 15, bottom: 20),
                ),

                // // DESC
                // Row(
                //   children: [
                //     MyAssetImage(
                //       Assets.paymentInfoNotes,
                //       width: 27,
                //       height: 27,
                //       color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary, darkColor: Colors.white),
                //     ),
                //     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.doPaymentOrder(orderId ?? "");
            },
            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,
              paddingBottom: 8,
              cornerRadius: 7,
              fontSize: 15,
              isFontMedium: true,
            )
          ],
        ));
  }
}