import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pin_code_fields/pin_code_fields.dart';
import 'package:regroup/Common/CommonGlassmorphism.dart';
import 'package:regroup/Common/base_manager.dart';
import 'package:regroup/Feed%20Module/Main_Screens/ProfileTab/view_model/profilePostmethod.dart';
import 'package:regroup/Global.dart';
import 'package:regroup/Utils/Common/CommonAppbar.dart';
import 'package:regroup/Utils/Common/CustomNextButton.dart';
import 'package:regroup/Utils/Common/blureffect.dart';
import 'package:regroup/Utils/Common/googleOAuthService.dart';
import 'package:regroup/Utils/Common/sized_box.dart';
import 'package:regroup/Utils/dialogs.dart';
import 'package:regroup/Utils/texts.dart';
import 'package:timer_button/timer_button.dart';

class VerifyCode extends StatefulWidget {
  const VerifyCode({super.key});

  @override
  State<VerifyCode> createState() => _VerifyCodeState();
}

class _VerifyCodeState extends State<VerifyCode> {
  TextEditingController pincodeController = TextEditingController();
  // final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  String currentpassword = Get.arguments['currentpass'];
  String newpassword = Get.arguments['newpass'];
  String confirmpassword = Get.arguments['confirmpass'];

  Uploadata() async {
    utils.loader();
    Map<String, dynamic> updata = {
      "otp": pincodeController.text,
      "new_password": newpassword,
    };
    // final data =  res
    final res = await Profilepostmethod().postChangepassverifyotp(updata);
    if (res.status == ResponseStatus.SUCCESS) {
      Get.back();
      print("verification done");

      Get.back();
      Get.back();

      return utils.showToast(res.message);
    } else {
      Get.back();
      print("change pass not done");
      return utils.showToast(res.message);
    }
  }

  Uploadataresendotp() async {
    utils.loader();
    Map<String, dynamic> updata = {
      "current_password": currentpassword,
      "new_password": newpassword,
      "confirm_password": confirmpassword,
    };
    final data = await Profilepostmethod().postChangepassword(updata);
    if (data.status == ResponseStatus.SUCCESS) {
      Get.back();
      print("otp done");

      setState(() {
        pincodeController.clear();
        // turnValidation = false;
      });
      return utils.showToast(data.message);
    } else {
      Get.back();
      print("otp not done");
      return utils.showToast(data.message);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF222935),
      appBar: CommonAppbar(titleTxt: ""),
      resizeToAvoidBottomInset: false,
      body: Stack(
        children: [
          Container(
            decoration: const BoxDecoration(
                image: DecorationImage(
                    image: AssetImage("assets/images/png/Ellipse 1496.png"),
                    fit: BoxFit.fill)),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  sizedBoxHeight(20.h),
                  text20700white("Check your email"),
                  sizedBoxHeight(10.h),
                  text14400whiteblur(
                      "Enter the verification code that we sent to $emailid"),
                  sizedBoxHeight(30.h),
                  text16400white("Enter code"),
                  sizedBoxHeight(20.h),
                  PinCodeTextField(
                    validator: (value) {
                      if (value != null && value.isEmpty) {
                        return "Please Enter verification code";
                      } else if (value != null && value.length < 4) {
                        return "OTP length should be at least 4";
                      }
                      return null;
                    },
                    keyboardType: TextInputType.number,
                    inputFormatters: [
                      FilteringTextInputFormatter.allow(RegExp('[0-9]')),
                    ],
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    length: 4,
                    obscureText: false,
                    animationType: AnimationType.fade,
                    pinTheme: PinTheme(
                      selectedFillColor: Color(0xFF434A53),
                      inactiveFillColor: Color(0xFF434A53),
                      inactiveColor: Color(0xFF434A53),
                      activeColor: Color(0xFF434A53),
                      selectedColor: Color(0xFF434A53),
                      shape: PinCodeFieldShape.underline,
                      borderRadius: BorderRadius.circular(5),
                      fieldHeight: 70,
                      fieldWidth: 70,
                      activeFillColor:
                          // Colors.white
                          Color(0xFF303030).withOpacity(0.4),
                      // textStyle: TextStyle(color: Colors.white, fontSize: 20), // Change text color and font size
                    ),
                    animationDuration: Duration(milliseconds: 300),
                    enableActiveFill: true,
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    controller: pincodeController,
                    onCompleted: (v) {
                      print("Completed");
                    },
                    onChanged: (value) {
                      print(value);
                      setState(() {
                        // currentText = value;
                      });
                    },
                    cursorColor: Colors.white,
                    textStyle: TextStyle(
                      color: Colors.white,
                      fontSize: 20.sp,
                      fontFamily: 'Helvetica',
                    ),
                    beforeTextPaste: (text) {
                      print("Allowing to paste $text");
                      return true;
                    },
                    appContext: context,
                  ),
                  sizedBoxHeight(10.h),
                  Center(
                    child: TimerButton(
                      disabledTextStyle: TextStyle(color: Colors.red),
                      activeTextStyle: TextStyle(color: Colors.white),
                      disabledColor: Color(0XFF222935).withOpacity(0.10),
                      buttonType: ButtonType.textButton,
                      label: "Resend OTP",
                      timeOutInSeconds: 6,
                      //mobile.text.isEmpty ?  1 : 60,
                      onPressed: () {
                        setState(() {
                          Uploadataresendotp();
                        });
                      },
                      // disabledColor: Colors.white,
                      color: Color(0XFF222935).withOpacity(0.10),
                    ),
                  ),
                  // ),
                  sizedBoxHeight(70.h),
                  CustomButton(
                    text: 'Continue',
                    onPressed: () {
                      if (pincodeController.text.isEmpty) {
                        utils.showToast("Pin field is empty");
                      } else if (pincodeController.text.length < 4) {
                        utils.showToast("OTP length should be 4 digits");
                      } else {
                        Uploadata();
                      }
                    },
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// class CustomPinCodeField extends StatefulWidget {
//   final TextEditingController controller;
//   final ValueChanged<String> onChanged;
//   final ValueChanged<String> onCompleted;

//   CustomPinCodeField({
//     required this.controller,
//     required this.onChanged,
//     required this.onCompleted,
//   });

//   @override
//   _CustomPinCodeFieldState createState() => _CustomPinCodeFieldState();
// }

// class _CustomPinCodeFieldState extends State<CustomPinCodeField> {
//   final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
//   late List<TextEditingController> _controllers;
//   late List<FocusNode> _focusNodes;
//   String _currentText = "";

//   @override
//   void initState() {
//     super.initState();
//     _controllers = List.generate(4, (_) => TextEditingController());
//     _focusNodes = List.generate(4, (_) => FocusNode());
//   }

//   @override
//   void dispose() {
//     _controllers.forEach((controller) => controller.dispose());
//     _focusNodes.forEach((focusNode) => focusNode.dispose());
//     super.dispose();
//   }

//   String? _validate(int index) {
//     if (_controllers[index].text.isEmpty) {
//       return "Please enter verification code";
//     } else if (_controllers[index].text.length > 1) {
//       return "Please enter only one digit";
//     }
//     return null;
//   }

//   void _onChanged(String value, int index) {
//     setState(() {
//       _currentText = _controllers.map((controller) => controller.text).join();
//     });

//     if (value.isNotEmpty) {
//       if (index < _controllers.length - 1) {
//         FocusScope.of(context).nextFocus();
//       } else {
//         // Last field, trigger onCompleted directly
//         if (_currentText.length == _controllers.length) {
//           widget.onCompleted(_currentText);
//         }
//       }
//     } else {
//       // Empty value, focus to previous field if not the first field
//       if (index > 0) {
//         FocusScope.of(context).previousFocus();
//       }
//     }
//     widget.onChanged(_currentText);
//   }

//   @override
//   Widget build(BuildContext context) {
//     return Form(
//       key: _formKey,
//       child: Column(
//         children: [
//           commonGlassContainer(
//             width: double.infinity,
//             height: 50.h,
//             borderradius: 30.r,
//             border: 1,
//             customWidget: Row(
//               mainAxisAlignment: MainAxisAlignment.center,
//               crossAxisAlignment: CrossAxisAlignment.center,
//               children: List.generate(4, (index) {
//                 return Row(
//                   crossAxisAlignment: CrossAxisAlignment.center,
//                   children: [
//                     Center(
//                       child: Container(
//                         width: 30,
//                         height: 40,
//                         child: Center(
//                           child: TextFormField(
//                             controller: _controllers[index],
//                             focusNode: _focusNodes[index],
//                             keyboardType: TextInputType.number,
//                             inputFormatters: [
//                               FilteringTextInputFormatter.allow(
//                                   RegExp('[0-9]')),
//                               LengthLimitingTextInputFormatter(1),
//                             ],
//                             textAlign: TextAlign.center,
//                             style: TextStyle(
//                               color: Colors.white,
//                               fontSize: 20,
//                               fontFamily: 'Helvetica',
//                             ),
//                             decoration: InputDecoration(
//                               border: InputBorder.none,
//                               errorStyle: TextStyle(height: 0),
//                             ),
//                             onChanged: (value) => _onChanged(value, index),
//                             validator: (value) => _validate(index),
//                           ),
//                         ),
//                       ),
//                     ),
//                     if (index != 3)
//                       Container(
//                         width: 12,
//                         height: 2,
//                         color: Colors.white,
//                         margin: EdgeInsets.symmetric(horizontal: 10),
//                       ),
//                   ],
//                 );
//               }),
//             ),
//           ),
//           sizedBoxHeight(10.h),
//           Text(
//             _validateErrors(),
//             style: TextStyle(color: Colors.red),
//           ),
//         ],
//       ),
//     );
//   }

//   String _validateErrors() {
//     for (int i = 0; i < _controllers.length; i++) {
//       String? error = _validate(i);
//       if (error != null) {
//         return error;
//       }
//     }

//     // Check if OTP length is less than 4
//     if (_currentText.length < 4) {
//       return "OTP length should be 4 digits";
//     }

//     return "";
//   }

//   // String _validateErrors() {
//   //   List<String> errors = [];

//   //   // Validate each TextFormField
//   //   for (int i = 0; i < _controllers.length; i++) {
//   //     String? error = _validate(i);
//   //     if (error != null && !errors.contains(error)) {
//   //       errors.add(error);
//   //     }
//   //   }

//   //   // Check OTP length only if there are no other errors
//   //   if (errors.isEmpty && _currentText.length < 4) {
//   //     errors.add("OTP length should be 4 digits");
//   //   }

//   //   // Return concatenated error messages
//   //   return errors.isNotEmpty ? errors.join("\n") : "";
//   // }
// }