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:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:plugin_platform/engine/toast/toast_engine.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:pinput/pinput.dart';
import '../../router/page/auth_page_router.dart';
import 'sign_up_verify_view_model.dart';

@RoutePage()
class SignUpVerifyPage extends HookConsumerWidget {
  final String firstName;
  final String lastName;
  final String email;
  final String fullPhone;
  final String password;
  final String confirmPassword;
  final String? verifyKey;
  final String? verifyCode;

  const SignUpVerifyPage({
    Key? key,
    required this.firstName,
    required this.lastName,
    required this.email,
    required this.fullPhone,
    required this.password,
    required this.confirmPassword,
    required this.verifyKey,
    required this.verifyCode,
  }) : super(key: key);

  //启动当前页面
  static void startInstance({
    required String firstName,
    required String lastName,
    required String email,
    required String phone,
    required String password,
    required String confirmPassword,
    required String? verifyKey,
    required String? verifyCode,
  }) {
    appRouter.push(SignUpVerifyPageRoute(
      firstName: firstName,
      lastName: lastName,
      email: email,
      fullPhone: phone,
      password: password,
      confirmPassword: confirmPassword,
      verifyKey: verifyKey,
      verifyCode: verifyCode,
    ));
  }

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

    useEffect(() {
      Future.microtask(() {
        //默认进来就发短信
        viewModel.sendSMS(fullPhone, verifyKey, verifyCode);
      });
      return () {
      };
    }, []);

    String? smsCode;  //已输入的短信验证码
    const length = 6;
    final borderColor = context.appColors.textPrimary;
    const errorColor = Colors.redAccent;
    final fillColor = context.appColors.authFiledBG;
    final defaultPinTheme = PinTheme(
      width: 50,
      height: 50,
      textStyle: TextStyle(color: context.appColors.textPrimary, fontWeight: FontWeight.w500, fontSize: 15),
      decoration: BoxDecoration(
        color: fillColor,
        borderRadius: BorderRadius.circular(5),
        border: Border.all(color: Colors.transparent),
      ),
    );

    return Scaffold(
      appBar: MyAppBar.appBar(context, ""),
      backgroundColor: context.appColors.backgroundDefault,
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        physics: const BouncingScrollPhysics(),
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 38),
          width: double.infinity,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              //顶部图片
              const MyAssetImage(
                Assets.authSmsVerifyImg,
                width: 260,
                height: 180,
              ).marginOnly(top: 12, bottom: 24),

              MyTextView(
                S.current.sign_up_verify_txt,
                fontSize: 15,
                marginBottom: 24,
                textAlign: TextAlign.center,
                isFontMedium: true,
                textColor: context.appColors.textBlack,
              ),

              SizedBox(
                height: 50,
                child: Pinput(
                  length: length,
                  controller: state.controller,
                  focusNode: state.focusNode,
                  defaultPinTheme: defaultPinTheme,
                  onCompleted: (pin) {
                    smsCode = pin;
                    viewModel.verifySignUpInput(
                      firstName: firstName,
                      lastName: lastName,
                      email: email,
                      fullPhone: fullPhone,
                      password: password,
                      confirmPassword: confirmPassword,
                      smsCode: pin,
                    );
                  },
                  focusedPinTheme: defaultPinTheme.copyWith(
                    height: 50,
                    width: 50,
                    decoration: defaultPinTheme.decoration!.copyWith(
                      border: Border.all(color: borderColor),
                    ),
                  ),
                  errorPinTheme: defaultPinTheme.copyWith(
                    decoration: BoxDecoration(
                      color: errorColor,
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                ),
              ),

              MyTextView(
                S.current.did_not_receive,
                fontSize: 15,
                marginTop: 24,
                marginBottom: 16,
                textAlign: TextAlign.center,
                isFontMedium: true,
                textColor: context.appColors.textBlack,
              ),

              MyButton(
                onPressed: () {
                  if (!state.isCounting) {
                    viewModel.showVerifyCodedDialog(fullPhone);
                  }
                },
                text: state.isCounting ? "${state.countdownTime} s" : S.current.resend_code,
                textColor: Colors.white,
                backgroundColor: state.isCounting ? context.appColors.disEnableGray : context.appColors.orangeBG,
                fontWeight: FontWeight.w500,
                type: ClickType.throttle,
                fontSize: 16,
                minHeight: 42,
                radius: 5,
              ).constrained(width: 140),

              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(
                          text: S.current.you_have,
                          style: TextStyle(color: context.appColors.textBlack, fontWeight: FontWeight.w500, fontSize: 15),
                        ),
                        TextSpan(
                          text: " 2 ",
                          style: TextStyle(color: context.appColors.textPrimary, fontWeight: FontWeight.w500, fontSize: 15),
                        ),
                        TextSpan(
                          text: S.current.tries_left,
                          style: TextStyle(color: context.appColors.textBlack, fontWeight: FontWeight.w500, fontSize: 15),
                        ),
                      ],
                    ),
                  ),
                ],
              ).marginOnly(top: 16),

              MyButton(
                onPressed: () {
                  viewModel.verifySignUpInput(
                    firstName: firstName,
                    lastName: lastName,
                    email: email,
                    fullPhone: fullPhone,
                    password: password,
                    confirmPassword: confirmPassword,
                    smsCode: smsCode,
                  );
                },
                text: S.current.next,
                textColor: Colors.white,
                backgroundColor: context.appColors.btnBgDefault,
                fontWeight: FontWeight.w500,
                type: ClickType.throttle,
                fontSize: 16,
                minHeight: 50,
                radius: 5,
              ).marginOnly(top: 50, bottom: 50),
            ],
          ),
        ),
      ),
    );
  }
}
