import 'package:cpt_payment/modules/choose_card/choose_card_page.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: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/my_text_field.dart';
import 'package:widgets/widget_export.dart';

import '../../router/page/payment_page_router.dart';
import 'add_card_state.dart';
import 'add_card_view_model.dart';

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

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

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

    return Scaffold(
      appBar: MyAppBar.appBar(context, S.current.add_new_card),
      backgroundColor: context.appColors.whiteBG,
      body: SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SingleChildScrollView(
                scrollDirection: Axis.vertical,
                physics: const BouncingScrollPhysics(),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        MyAssetImage(Assets.paymentMasterCardIcon, width: 51, height: 30.5),
                        MyAssetImage(Assets.paymentVisaIcon, width: 78.5, height: 25.5),
                        MyAssetImage(Assets.paymentAmericanExpressIcon, width: 47, height: 29),
                      ],
                    ).marginOnly(left: 20, right: 20, top: 32, bottom: 32),

                    //信用卡
                    MyTextView(
                      S.current.credit_debit_card,
                      fontSize: 17,
                      marginLeft: 15,
                      marginRight: 15,
                      textColor: context.appColors.textBlack,
                      isFontMedium: true,
                    ),

                    //持卡人姓名
                    _buildInputLayout(
                      context,
                      state,
                      "card_name",
                      margin: const EdgeInsets.only(left: 15, right: 15, top: 16),
                      leftIcon: Assets.paymentCardName,
                      textInputType: TextInputType.text,
                      textInputAction: TextInputAction.next,
                      onSubmit: (formKey, value) {
                        state.formData[formKey]!['focusNode'].unfocus();
                        FocusScope.of(context).requestFocus(state.formData['card_number']!['focusNode']);
                      },
                    ),

                    //卡号
                    _buildInputLayout(
                      context,
                      state,
                      "card_number",
                      margin: const EdgeInsets.only(left: 15, right: 15, top: 10, bottom: 21),
                      leftIcon: Assets.paymentCardNumber,
                      textInputType: TextInputType.number,
                      textInputAction: TextInputAction.next,
                      onSubmit: (formKey, value) {
                        state.formData[formKey]!['focusNode'].unfocus();
                        FocusScope.of(context).requestFocus(state.formData['month']!['focusNode']);
                      },
                    ),

                    //月份，年份，验证码
                    Row(
                      children: [
                        //月份
                        _buildInputLayout(
                          context,
                          state,
                          "month",
                          margin: const EdgeInsets.only(left: 15),
                          showLeftIcon: false,
                          textInputType: TextInputType.number,
                          textInputAction: TextInputAction.next,
                          onSubmit: (formKey, value) {
                            state.formData[formKey]!['focusNode'].unfocus();
                            FocusScope.of(context).requestFocus(state.formData['year']!['focusNode']);
                          },
                        ).expanded(),

                        //年份
                        _buildInputLayout(
                          context,
                          state,
                          "year",
                          margin: const EdgeInsets.only(left: 8.5, right: 8.5),
                          showLeftIcon: false,
                          textInputType: TextInputType.number,
                          textInputAction: TextInputAction.next,
                          onSubmit: (formKey, value) {
                            state.formData[formKey]!['focusNode'].unfocus();
                            FocusScope.of(context).requestFocus(state.formData['cyc']!['focusNode']);
                          },
                        ).expanded(),

                        //验证码
                        _buildInputLayout(
                          context,
                          state,
                          "cyc",
                          margin: const EdgeInsets.only(right: 15),
                          showLeftIcon: false,
                          textInputType: TextInputType.number,
                          textInputAction: TextInputAction.next,
                          onSubmit: (formKey, value) {
                            state.formData[formKey]!['focusNode'].unfocus();
                          },
                        ).expanded(),
                      ],
                    )
                  ],
                )).expanded(),

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

  Widget _buildInputLayout(
    BuildContext context,
    AddCardState state,
    String key, {
    EdgeInsetsGeometry? margin,
    bool showRightIcon = false, //是否展示右侧的布局
    bool showLeftIcon = true, //是否展示左侧侧的布局
    Widget? rightWidget, //右侧的布局
    TextInputType textInputType = TextInputType.text,
    String? leftIcon,
    String? errorText,
    bool obscureText = false,
    TextInputAction textInputAction = TextInputAction.done,
    Function? onSubmit,
  }) {
    return IgnoreKeyboardDismiss(
      child: MyTextField(
        key,
        fillBackgroundColor: context.appColors.authFiledBG,
        state.formData[key]!['value'],
        hintText: state.formData[key]!['hintText'],
        hintStyle: TextStyle(
          color: context.appColors.authFiledHintDark,
          fontSize: 16.0,
          fontWeight: FontWeight.w400,
        ),
        controller: state.formData[key]!['controller'],
        focusNode: state.formData[key]!['focusNode'],
        margin: margin ?? EdgeInsets.zero,
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 3),
        showDivider: false,
        height: 44,
        style: TextStyle(
          color: context.appColors.authFiledText,
          fontSize: 16.0,
          fontWeight: FontWeight.w400,
        ),
        inputType: textInputType,
        textInputAction: textInputAction,
        onSubmit: onSubmit,
        cursorColor: context.appColors.authFiledText,
        obscureText: obscureText,
        errorText: errorText,
        showLeftIcon: showLeftIcon,
        leftWidget: showLeftIcon ? MyAssetImage(leftIcon ?? "", width: 27, height: 27) : const SizedBox(),
        showRightIcon: showRightIcon,
        rightWidget: rightWidget,
      ),
    );
  }
}