import 'package:circular_countdown_timer/circular_countdown_timer.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:muaawana/views/auth/widgets/otp_widget.dart';

import '../../config/app_constant.dart';
import '../../config/provider.dart';
import '../../config/size.dart';
import '../../config/style.dart';
import '../../providers/auth_provider.dart';
import '../../utils/text_style.dart';
import '../../utils/text_widget.dart';
import '../../widgets/custom_botton_widget.dart';

class VerificationCodeScreen extends StatefulWidget {
  final String email;

  const VerificationCodeScreen({Key? key, required this.email})
      : super(key: key);

  @override
  State<VerificationCodeScreen> createState() => _VerificationCodeScreenState();
}

class _VerificationCodeScreenState extends State<VerificationCodeScreen> {
  final TextEditingController _fieldOne = TextEditingController();
  final TextEditingController _fieldTwo = TextEditingController();
  final TextEditingController _fieldThree = TextEditingController();
  final TextEditingController _fieldFour = TextEditingController();

  final hm = SizeConfig.heightMultiplier;
  final wm = SizeConfig.widthMultiplier;
  final tm = SizeConfig.textMultiplier;

  @override
  Widget build(BuildContext context) {
    final authProvider = Provider.of<AuthProvider>(context);
    return Scaffold(
      backgroundColor: AppStyle.appBackground,
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.fromLTRB(wm * 10, 0, wm * 10, hm * 20),
          child: Column(
            children: [
              SizedBox(
                height: hm * 5,
              ),
              Hero(
                tag: "logo",
                child: Image.asset(Consts.appLogo,
                    height: hm * 4.5, width: wm * 10),
              ),
              // Padding(
              //   padding: EdgeInsets.only(top: hm * 10, bottom: hm * 5),
              //   child: SvgPicture.asset(Consts.checkedIcon,
              //       height: hm * 7, width: wm * 10),
              // ),
              const SizedBox(
                height: 50,
              ),
              Center(
                child: Txt(
                  text: "Verification code",
                  style: tS(
                    'medium',
                    tm * 3,
                    FontWeight.w600,
                    AppStyle.black,
                  ),
                ),
              ),
              SizedBox(
                height: hm * 2,
              ),
              const SizedBox(
                height: 50,
              ),

              Center(
                child: Txt(
                  text: "Email",
                  style: tS(
                    'medium',
                    tm * 1.5,
                    FontWeight.w600,
                    AppStyle.black,
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: hm),
                child: Container(
                    height: 30,
                    width: wm * 55,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15),
                      color: AppStyle.white,
                    ),
                    child: Align(
                      alignment: Alignment.center,
                      child: Txt(
                        text: widget.email,
                        style: tS(
                          'medium',
                          tm * 1.5,
                          FontWeight.w600,
                          AppStyle.black,
                        ),
                      ),
                    )),
              ),
              CircularCountDownTimer(
                duration: 90,
                initialDuration: 0,
                controller: CountDownController(),
                width: wm * 20,
                height: hm * 20,
                ringColor: AppStyle.buttonBlue,
                ringGradient: null,
                fillColor: AppStyle.appBackground,
                fillGradient: null,
                backgroundColor: AppStyle.white,
                backgroundGradient: null,
                strokeWidth: 2.0,
                strokeCap: StrokeCap.round,
                textStyle: const TextStyle(
                    fontSize: 12.0,
                    color: AppStyle.black,
                    fontWeight: FontWeight.bold),
                textFormat: CountdownTextFormat.MM_SS,
                isReverse: true,
                isReverseAnimation: true,
                isTimerTextShown: true,
                autoStart: true,
                timeFormatterFunction: (defaultFormatterFunction, duration) {
                  if (duration.inSeconds == 0) {
                    return "00:00";
                  } else {
                    return Function.apply(defaultFormatterFunction, [duration]);
                  }
                },
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: wm * 5),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    OtpInput(_fieldOne, true), // auto focus
                    OtpInput(_fieldTwo, false),
                    OtpInput(_fieldThree, false),
                    OtpInput(_fieldFour, false)
                  ],
                ),
              ),
              SizedBox(
                height: hm * 3,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SvgPicture.asset(
                    Consts.resendIcon,
                    height: hm * 2,
                  ),
                  Txt(
                    text: "  Resend code",
                    style: tS(
                      'medium',
                      tm * 1.5,
                      FontWeight.w600,
                      AppStyle.black,
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: hm * 2,
              ),
              GestureDetector(
                onTap: () {
                  final String resetCode =
                      "${_fieldOne.text}${_fieldTwo.text}${_fieldThree.text}${_fieldFour.text}";
                  // Navigator.push(
                  //     context,
                  //     MaterialPageRoute(
                  //         builder: (context) => HomeScreenClient()));
                  authProvider.resetPasswordStepTwo(
                    context,
                    widget.email,
                    resetCode,
                  );
                },
                child: const CustomButtonWidget(
                  height: 35,
                  width: 210,
                  borderRadius: 28,
                  fontSize: 15,
                  fillColor: AppStyle.buttonBlue,
                  borderColor: AppStyle.buttonBlue,
                  textColor: AppStyle.white,
                  text: 'Confirm code',
                  fontFamily: 'lato-regular',
                  fontWeight: FontWeight.normal,
                ),
              ),
              // PrimaryButton(
              //   text: 'Confirm code',
              //   function: () async {
              //     final String resetCode =
              //         "${_fieldOne.text}${_fieldTwo.text}${_fieldThree.text}${_fieldFour.text}";
              //     await context.read<AuthProvider>().resetPasswordSecondStep(
              //         context,
              //         widget.email,
              //         resetCode); // if (!await Connection.checkConnection()) {
              //   },
              // ),
              SizedBox(height: hm * 10),
            ],
          ),
        ),
      ),
    );
  }
}