import 'package:flutter/material.dart';
import 'package:healthcare_pharmacy/dashboard.dart';
import 'package:healthcare_pharmacy/login.dart';
import 'package:healthcare_pharmacy/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();
  TextEditingController otpController = 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'),
          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: 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) {

                     // Set the OTP to the otpController
                      otpController.text = _otp!;
                      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();
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => const Login()),
                          );
                        }
                        else{
                          Navigator.of(context,rootNavigator: true).pop();
                        }


                      }
                      else{
                        Navigator.of(context,rootNavigator: true).pop();
                      }


                    }
                    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(
            border: OutlineInputBorder(),
            counterText: '',
            hintStyle: TextStyle(color: Colors.black, fontSize: 20.0)),
        onChanged: (value) {
          if (value.length == 1) {
            FocusScope.of(context).nextFocus();
          }
        },
      ),
    );
  }
}
