import 'package:flutter/material.dart';
import 'package:healthcare_user/common/dashboard.dart';
import 'package:healthcare_user/common/login.dart';
import 'package:healthcare_user/common/settings.dart';
class OtpScreen extends StatefulWidget {
  var myObject;
  OtpScreen({this.myObject});

  @override
  State<OtpScreen> createState() => _OtpScreenState();
}

class _OtpScreenState extends State<OtpScreen> {

  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(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Phone Number Verification'),


         Visibility(
           visible: false,
           child:  Container(
           padding: const EdgeInsets.all(10),
           child: TextFormField(
             cursorColor: greyColor,
             controller: mobileNumberController,
             keyboardType: TextInputType.number,
             decoration: const InputDecoration(
               prefixIcon: Icon(
                 Icons.phone,
                 color: greyColor,
               ),
               border: OutlineInputBorder(
                   borderSide: BorderSide(color: greyColor)),
               focusedBorder: OutlineInputBorder(
                 borderSide: BorderSide(color:greyColor),
               ),
               enabledBorder: OutlineInputBorder(
                 borderSide: BorderSide(color: greyColor),
               ),
               labelText: 'Enter MobileNumber',
               labelStyle: TextStyle(
                 color: greyColor, //<-- SEE HERE
               ),
             ),
           ),
         ),),
          const SizedBox(
            height: 30,
          ),
         Visibility(
           visible: false,
           child:  Container(
           width: MediaQuery.of(context).size.width * .99,
           height: 50,
           child: ElevatedButton(
               style: ElevatedButton.styleFrom(
                 primary: primaryColor, // background
                 onPrimary: Colors.white, // foreground
               ),
               onPressed: ()async {

               },
               child: const Text('Submit')),
         ),),
          // Implement 4 input fields
          Visibility(
            visible:true,
            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: false,
            child:   Container(
              padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),
              child: TextFormField(
                cursorColor: greyColor,
                obscureText: isObscureText,
                controller: passwordController,
                decoration: InputDecoration(
                  labelText: 'Password',
                  prefixIcon: const Icon(Icons.password, color: greyColor,),
                  labelStyle: const TextStyle(
                    color: greyColor, //<-- SEE HERE
                  ),
                  border: const OutlineInputBorder(
                      borderSide: BorderSide(color: greyColor)),
                  focusedBorder: const OutlineInputBorder(
                    borderSide: BorderSide(color: greyColor),
                  ),
                  enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide(color: textFieldStartColor),
                  ),
                  suffixIcon: IconButton(
                    icon:  Icon(
                      Icons.visibility_off_outlined,
                      color: isObscureText==true?greyColor:primaryColor,
                    ),
                    onPressed: () {

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

                ),

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

                    if (_otp!.length == 6) {
                      AppSettings.preLoaderDialog(context);

                      bool isOnline = await AppSettings.internetConnectivity();

                      if(isOnline){
                        var payload = new Map<String, dynamic>();
                        payload["phoneVerificationCode"] = _otp.toString();
                        payload["phone"] = widget.myObject.toString();
                        bool phoneVerified = await AppSettings.phoneVerification(payload);
                        if(phoneVerified){
                          Navigator.of(context,rootNavigator: true).pop();
                          AppSettings.longSuccessToast(
                              "Phone verified successfully");
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => const Dashboard()),
                          );
                        }
                        else{
                          Navigator.of(context,rootNavigator: true).pop();
                          AppSettings.longFailedToast(
                              "please enter valid pin");
                        }


                      }
                      else{
                        Navigator.of(context,rootNavigator: true).pop();
                        AppSettings.longFailedToast(
                            "Please check your internet");
                      }


                    }
                    else{

                    }
                  },
                  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: Theme.of(context).primaryColor,
        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();
          }
        },
      ),
    );
  }
}