
import 'package:cpt_profile/modules/reset_password/reset_password_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:hooks_riverpod/hooks_riverpod.dart';
import 'package:plugin_basic/dialog/country_code_selecter.dart';
import 'package:plugin_basic/provider/user_config/user_config_service.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_field.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';

import '../../router/page/profile_page_router.dart';
import 'reset_password_view_model.dart';

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

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

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

    return Scaffold(
      appBar: MyAppBar.appBar(context, S.current.reset_password),
      backgroundColor: context.appColors.backgroundDefault,
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        physics: const BouncingScrollPhysics(),
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 15),
          width: double.infinity,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              //手机号码
              MyTextView(
                S.current.mobile_phone,
                fontSize: 16.5,
                marginTop: 38,
                marginBottom: 15,
                isFontMedium: true,
                textColor: context.appColors.textBlack,
              ),

              //电话号码
              Row(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  //封装的国家选择控件
                  CountryCodeSelector(
                    countryCode: UserConfigService.getState().user?.information?.countryCode ?? "+65",
                    isEnable: false,
                    onChanged: (countryCode) {},
                  ).marginOnly(left: 15),

                  //电话输入框
                  _buildInputLayout(
                    context,
                    state,
                    "phone",
                    enable: false,
                    fillBGColor: Colors.transparent,
                    textInputType: TextInputType.number,
                    textInputAction: TextInputAction.done,
                    onSubmit: (formKey, value) {
                      state.formData[formKey]!['focusNode'].unfocus();
                      FocusScope.of(context).requestFocus(state.formData['code']!['focusNode']);
                    },
                  ).expanded(),
                ],
              ).decorated(
                color: context.appColors.authFiledBG,
                borderRadius: BorderRadius.circular(5.0),
              ),

              //手机的验证码
              MyTextView(
                S.current.verification_code,
                fontSize: 16.5,
                marginTop: 14,
                marginBottom: 16,
                isFontMedium: true,
                textColor: context.appColors.textBlack,
              ),

              // 表单 - 电话号码验证码
              _buildInputLayout(
                context,
                state,
                "code",
                textInputType: TextInputType.number,
                textInputAction: TextInputAction.next,
                errorText: state.codeErrorText,
                showRightIcon: true,
                rightWidget: MyTextView(
                  state.isCounting ? "${state.countdownTime} s" : S.current.get_code,
                  textAlign: TextAlign.center,
                  textColor: context.appColors.textPrimary,
                  fontSize: 15,
                  paddingRight: 5,
                  isFontMedium: true,
                  onClick: state.isCounting ? null : () => viewModel.showVerifyCodedDialog(),
                ).paddingOnly(top: 15, bottom: 15),
                onSubmit: (formKey, value) {
                  state.formData[formKey]!['focusNode'].unfocus();
                  FocusScope.of(context).requestFocus(state.formData['password']!['focusNode']);
                },
              ),

              //新密码
              MyTextView(
                S.current.new_password,
                fontSize: 16.5,
                marginTop: 14,
                marginBottom: 16,
                isFontMedium: true,
                textColor: context.appColors.textBlack,
              ),

              // 表单 - 新密码
              _buildInputLayout(
                context,
                state,
                "password",
                obscureText: !state.pwdVisibility,
                errorText: state.passwordErrorText,
                textInputAction: TextInputAction.next,
                showRightIcon: true,
                rightWidget: IconButton(
                  highlightColor: Colors.transparent,
                  splashColor: Colors.transparent,
                  icon: !state.pwdVisibility
                      ? const MyAssetImage(
                    Assets.authPasswordHide,
                    width: 22.5,
                    height: 16.5,
                  )
                      : const MyAssetImage(
                    Assets.authPasswordShow,
                    width: 22.5,
                    height: 16.5,
                  ),
                  onPressed: () {
                    viewModel.switchPwdVisibility();
                  },
                ),
                onSubmit: (formKey, value) {
                  state.formData[formKey]!['focusNode'].unfocus();
                  FocusScope.of(context).requestFocus(state.formData['confirm_password']!['focusNode']);
                },
              ),

              //重复密码
              MyTextView(
                S.current.confirm_new_password,
                fontSize: 16.5,
                marginTop: 14,
                marginBottom: 16,
                isFontMedium: true,
                textColor: context.appColors.textBlack,
              ),

              // 表单 - 确认密码
              _buildInputLayout(
                context,
                state,
                "confirm_password",
                obscureText: !state.confirmPwdVisibility,
                errorText: state.confirmPasswordErrorText,
                showRightIcon: true,
                rightWidget: IconButton(
                  highlightColor: Colors.transparent,
                  splashColor: Colors.transparent,
                  icon: !state.confirmPwdVisibility
                      ? const MyAssetImage(
                    Assets.authPasswordHide,
                    width: 22.5,
                    height: 16.5,
                  )
                      : const MyAssetImage(
                    Assets.authPasswordShow,
                    width: 22.5,
                    height: 16.5,
                  ),
                  onPressed: () {
                    viewModel.switchConfirmPwdVisibility();
                  },
                ),
                onSubmit: (formKey, value) {
                  state.formData[formKey]!['focusNode'].unfocus();
                  viewModel.submitResetPassword();
                },
              ),

              //提交按钮
              MyButton(
                onPressed: viewModel.submitResetPassword,
                text: S.current.submit,
                textColor: Colors.white,
                backgroundColor: context.appColors.btnBgDefault,
                fontWeight: FontWeight.w500,
                type: ClickType.throttle,
                fontSize: 16,
                minHeight: 50,
                radius: 5,
              ).marginOnly(top: 50, bottom: 30),
            ],
          ),
        ),
      ),
    );
  }

  /// 输入框
  Widget _buildInputLayout(
      BuildContext context,
      ResetPasswordState state,
      String key, {
        double marginTop = 0,
        bool? showRightIcon = false, //是否展示右侧的布局
        Widget? rightWidget, //右侧的布局
        TextInputType textInputType = TextInputType.text,
        String? errorText,
        bool obscureText = false,
        bool enable = true,
        Color? fillBGColor,
        TextInputAction textInputAction = TextInputAction.done,
        Function? onSubmit,
      }) {
    return IgnoreKeyboardDismiss(
      child: MyTextField(
        key,
        fillBackgroundColor: fillBGColor ?? context.appColors.authFiledBG,
        state.formData[key]!['value'],
        hintText: state.formData[key]!['hintText'],
        hintStyle: TextStyle(
          color: context.appColors.authFiledHint,
          fontSize: 15.0,
          fontWeight: FontWeight.w500,
        ),
        controller: state.formData[key]!['controller'],
        focusNode: state.formData[key]!['focusNode'],
        margin: EdgeInsets.only(top: marginTop),
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 3),
        showDivider: false,
        enabled: enable,
        height: 44,
        style: TextStyle(
          color: context.appColors.authFiledText,
          fontSize: 15.0,
          fontWeight: FontWeight.w500,
        ),
        inputType: textInputType,
        textInputAction: textInputAction,
        onSubmit: onSubmit,
        cursorColor: context.appColors.authFiledText,
        obscureText: obscureText,
        errorText: errorText,
        showLeftIcon: true,
        showRightIcon: showRightIcon,
        rightWidget: rightWidget,
      ),
    );
  }

}
