import 'package:flutter/material.dart';
import 'package:healthcare_user/common/login.dart';
import 'package:healthcare_user/common/settings.dart';
class OtpScreencForgotPassword extends StatefulWidget {
  const OtpScreencForgotPassword({Key? key}) : super(key: key);

  @override
  State<OtpScreencForgotPassword> createState() => _OtpScreencForgotPasswordState();
}

class _OtpScreencForgotPasswordState extends State<OtpScreencForgotPassword> {

  final TextEditingController _fieldOne = TextEditingController();
  final TextEditingController _fieldTwo = TextEditingController();
  final TextEditingController _fieldThree = TextEditingController();
  final TextEditingController _fieldFour = TextEditingController();
  final TextEditingController _fieldFive = TextEditingController();
  final TextEditingController _fieldSix = TextEditingController();
  TextEditingController mobileNumberController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  bool isTextfieldVisible=true;
  bool isOtpVisible=false;
  bool isObscureText=true;

  // This is the entered code
  // It will be displayed in a Text widget
  String? _otp;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: primaryColor,
      body: Padding(
        padding: EdgeInsets.all(10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Phone Number Verification',style: TextStyle(color: Colors.white),),
            SizedBox(
              height:MediaQuery.of(context).size.height * .02,
            ),

            Visibility(
              visible: isTextfieldVisible,
              child:  Container(
                child: TextFormField(
                  cursorColor: Colors.white,
                  style: TextStyle(color: Colors.white),
                  controller: mobileNumberController,
                  keyboardType: TextInputType.number,
                  decoration: textFormFieldDecoration(Icons.phone,'Enter MobileNumber'),
                ),
              ),),
            const SizedBox(
              height: 30,
            ),
            Visibility(
              visible: isTextfieldVisible,
              child:  Container(
                width:double.infinity,
                height: MediaQuery.of(context).size.height * .05,
                child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: buttonColors, // background
                      onPrimary: Colors.black, // foreground
                    ),
                    onPressed: ()async {


                      if(mobileNumberController.text.length>=10){
                        var payload = new Map<String, dynamic>();
                        payload["phone"] = mobileNumberController.text.toString();

                        bool forgotPwd = await AppSettings.forgotPassword(payload);

                        if(forgotPwd){
                          setState(() {
                            isTextfieldVisible=false;
                            isOtpVisible=true;
                          });

                        }
                        else{
                          AppSettings.longFailedToast('Please enter valid registered mobile number');
                        }

                      }
                      else{
                        AppSettings.longFailedToast('Please enter 10 digits of mobile number');
                      }

                    },
                    child: const Text('Submit')),
              ),),
            // Implement 4 input fields
            Visibility(
              visible:isOtpVisible,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  OtpInput(_fieldOne, true), // auto focus
                  OtpInput(_fieldTwo, false),
                  OtpInput(_fieldThree, false),
                  OtpInput(_fieldFour, false),
                  OtpInput(_fieldFive, false),
                  OtpInput(_fieldSix, false),
                ],
              ),),
            const SizedBox(
              height: 30,
            ),
            Visibility(
              visible: isOtpVisible,
              child:   Container(
                padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),
                child: TextFormField(
                  cursorColor: Colors.white,
                  style: TextStyle(color: Colors.white),
                  obscureText: isObscureText,
                  controller: passwordController,
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: primaryColor,
                    labelText: 'Password',
                    prefixIcon: const Icon(Icons.password, color: Colors.white,),
                    labelStyle: const TextStyle(
                      color: Colors.white, //<-- SEE HERE
                    ),
                    border: const OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.white)),
                    focusedBorder: const OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.white),
                    ),
                    enabledBorder: const OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.white),
                    ),
                    suffixIcon: IconButton(
                      icon:  Icon(
                        Icons.visibility_off_outlined,
                        color: isObscureText==true?buttonColors:Colors.white,
                      ),
                      onPressed: () {

                        print("show password");
                        setState(() {
                          isObscureText = !isObscureText;
                        });
                      },
                    ),

                  ),

                ),
              ),),
            const SizedBox(
              height: 30,
            ),
            Visibility(
                visible: isOtpVisible,
                child: Container(
                  width:double.infinity,
                  height: MediaQuery.of(context).size.height * .05,
                  child: ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        primary: buttonColors, // background
                        onPrimary: Colors.black, // foreground
                      ),
                      onPressed: ()async {
                        setState(() {
                          _otp = _fieldOne.text +
                              _fieldTwo.text +
                              _fieldThree.text +
                              _fieldFour.text+
                              _fieldFive.text +
                              _fieldSix.text;
                        });

                        if (_otp!.length == 6&&passwordController.text!='') {
                          AppSettings.preLoaderDialog(context);

                          bool isOnline = await AppSettings.internetConnectivity();

                          if(isOnline){
                            var payload = new Map<String, dynamic>();
                            payload["phone"] = mobileNumberController.text.toString();
                            payload["resetPasswordCode"] =  _otp.toString();
                            payload["newPassword"] = passwordController.text.toString();

                            bool signinStatus = await AppSettings.resetPassword(payload);
                            try{
                              if (signinStatus) {
                                Navigator.of(context,rootNavigator: true).pop();
                                await  Navigator.push(
                                  context,
                                  MaterialPageRoute(builder: (context) => Login()),
                                );
                                AppSettings.longSuccessToast("Password reset successfully");

                              } else {
                                Navigator.of(context,rootNavigator: true).pop();
                                AppSettings.longFailedToast("Please enter valid details");
                              }
                            }
                            catch(exception){
                              Navigator.of(context,rootNavigator: true).pop();
                              print(exception);
                            }
                          }
                          else{
                            Navigator.of(context,rootNavigator: true).pop();
                            AppSettings.longFailedToast("Please Check internet");
                          }


                        }
                        else{

                          AppSettings.longFailedToast("Please enter valid details");
                        }
                      },
                      child: const Text('Submit')),
                )
            )
          ],
        ),
      )
    );
  }
}

// Create an input widget that takes only one digit
class OtpInput extends StatelessWidget {
  final TextEditingController controller;
  final bool autoFocus;
  const OtpInput(this.controller, this.autoFocus, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 60,
      width: 50,
      child: TextField(
        autofocus: autoFocus,
        textAlign: TextAlign.center,
        keyboardType: TextInputType.number,
        controller: controller,
        maxLength: 1,
        cursorColor: Colors.black,
        decoration: const InputDecoration(
            filled: true,
            fillColor: Colors.white,
            border: OutlineInputBorder(borderSide: BorderSide(color: primaryColor)),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: primaryColor),
            ),
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: primaryColor),
            ),
            counterText: '',
            hintStyle: TextStyle(color: Colors.black, fontSize: 20.0)),
        onChanged: (value) {
          if (value.length == 1) {
            FocusScope.of(context).nextFocus();
          }
        },
      ),
    );
  }
}