import 'package:flutter/material.dart';
import 'package:watermanagement/dashboard.dart';
import 'package:watermanagement/settings.dart';

class OtpScreen extends StatefulWidget {

  var phoneNumber;
  OtpScreen({
    this.phoneNumber
  });

  @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 phoneverificationCodeController = TextEditingController();

  // 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,
          ),
          // Implement 4 input fields
          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,
          ),
          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.phoneNumber.toString();
                    bool signinStatus = await AppSettings.login(payload);
                    try{
                      if (signinStatus) {
                        Navigator.of(context,rootNavigator: true).pop();
                        await  Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => Dashboard()),
                        );
                        AppSettings.longSuccessToast("Logged in 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')),
          const SizedBox(
            height: 30,
          ),
          // Display the entered OTP code
          Text(
            _otp ?? 'Please enter OTP',
            style: const TextStyle(fontSize: 30),
          )
        ],
      ),
    );
  }
}

// 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();
          }
        },
      ),
    );
  }
}