import 'package:flutter/material.dart';

import '../../../services/auth.dart';


class userRegister extends StatefulWidget {
  @override
  State<userRegister> createState() => _userRegisterState();
}

class _userRegisterState extends State<userRegister> {
  final AuthService _auth = AuthService();
  final _formKey = GlobalKey<FormState>();

  // text field state
  String name = '';
  String email = '';
  String phoneNumber = '';
  String icNumber = '';
  String password = '';
  String passwordCheck = '';

  String error = '';
  bool loading = false;

  int InputFontsize = 15;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(
            Icons.chevron_left,
            size: 36,
          ),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body:
      SingleChildScrollView(
        child: Form(
          key: _formKey,
          child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 50),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start, // Align at the top
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "Register",
                      style: TextStyle(
                        fontFamily: 'Poppins',
                        fontSize: 30,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),
                  ),

                  // Input name
                  const SizedBox(height: 10),
                  Container(
                    width: 334,
                    height: 52,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.white,
                      border: Border.all(
                        color: const Color.fromRGBO(165, 165, 165, 1),
                        width: 1,
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20.0),
                      child:
                      TextFormField(
                        decoration: const InputDecoration(
                          hintText: "Name",
                          hintStyle: TextStyle(
                            fontFamily: 'Poppins',
                            // fontSize: 20,
                            color: Color.fromRGBO(165, 165, 165, 1),
                          ),
                          border: InputBorder.none,
                        ),
                        style: const TextStyle(
                          fontFamily: 'Poppins',
                          // fontSize: 20,
                          color: Colors.black, // input  text color
                        ),
                        validator: (val) => val!.length < 4 ? 'Enter a name more than 3 chars' : null,
                        onChanged: (val) {
                          setState(() => name = val);
                        },
                      ),
                    ),
                  ),

                  // Input UPM email
                  const SizedBox(height: 20),
                  Container(
                    width: 334,
                    height: 52,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.white,
                      border: Border.all(
                        color: const Color.fromRGBO(165, 165, 165, 1),
                        width: 1,
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 10.0),
                      child: TextFormField(
                        decoration: const InputDecoration(
                          hintText: "UPM email",
                          hintStyle: TextStyle(
                            fontFamily: 'Poppins',
                            // fontSize: 20,
                            color: Color.fromRGBO(165, 165, 165, 1),
                          ),
                          border: InputBorder.none,
                        ),
                        style: const TextStyle(
                          fontFamily: 'Poppins',
                          // fontSize: 20,
                          color: Colors.black, // input  text color
                        ),
                        validator: (val) =>
                        val!.length < 4 ? 'Enter your UPM email' : null,
                        obscureText: false,
                        onChanged: (val) {
                          setState(() => email= val);
                        },
                      ),
                    ),
                  ),

                  // Input Phone Number
                  const SizedBox(height: 20),
                  Container(
                    width: 334,
                    height: 52,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.white,
                      border: Border.all(
                        color: const Color.fromRGBO(165, 165, 165, 1),
                        width: 1,
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 10.0),
                      child: TextFormField(
                        decoration: const InputDecoration(
                          hintText: "Phone Number (11-, not 011-)",
                          hintStyle: TextStyle(
                            fontFamily: 'Poppins',
                            // fontSize: 20,
                            color: Color.fromRGBO(165, 165, 165, 1),
                          ),
                          border: InputBorder.none,
                        ),
                        style: const TextStyle(
                          fontFamily: 'Poppins',
                          // fontSize: 20,
                          color: Colors.black, // input  text color
                        ),
                        validator: (val) =>
                        val!.length != 10 ? 'Enter a valid phone number' : null,
                        obscureText: false,
                        onChanged: (val) {
                          setState(() => phoneNumber = val);
                        },
                      ),
                    ),
                  ),

                  // Input IC number
                  const SizedBox(height: 20),
                  Container(
                    width: 334,
                    height: 52,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.white,
                      border: Border.all(
                        color: const Color.fromRGBO(165, 165, 165, 1),
                        width: 1,
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 10.0),
                      child: TextFormField(
                        decoration: const InputDecoration(
                          hintText: "IC Number / Passort Number",
                          hintStyle: TextStyle(
                            fontFamily: 'Poppins',
                            // fontSize: 20,
                            color: Color.fromRGBO(165, 165, 165, 1),
                          ),
                          border: InputBorder.none,
                        ),
                        style: const TextStyle(
                          fontFamily: 'Poppins',
                          // fontSize: 20,
                          color: Colors.black, // input  text color
                        ),
                        validator: (val) =>
                        val!.length != 12 || val!.length != 9 ? 'Enter a valid IC/Passport Number' : null,
                        obscureText: false,
                        onChanged: (val) {
                          setState(() => icNumber = val);
                        },
                      ),
                    ),
                  ),

                  // Input Password
                  const SizedBox(height: 20),
                  Container(
                    width: 334,
                    height: 52,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.white,
                      border: Border.all(
                        color: const Color.fromRGBO(165, 165, 165, 1),
                        width: 1,
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 10.0),
                      child: TextFormField(
                        decoration: const InputDecoration(
                          hintText: "Password",
                          hintStyle: TextStyle(
                            fontFamily: 'Poppins',
                            // fontSize: 20,
                            color: Color.fromRGBO(165, 165, 165, 1),
                          ),
                          border: InputBorder.none,
                        ),
                        style: const TextStyle(
                          fontFamily: 'Poppins',
                          // fontSize: 20,
                          color: Colors.black, // input  text color
                        ),
                        validator: (val) =>
                        val!.length < 6 ? 'Enter a password > 6 chars long' : null,
                        obscureText: true,
                        onChanged: (val) {
                          setState(() => password = val);
                        },
                      ),
                    ),
                  ),

                  // Check Password
                  const SizedBox(height: 20),
                  Container(
                    width: 334,
                    height: 52,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.white,
                      border: Border.all(
                        color: const Color.fromRGBO(165, 165, 165, 1),
                        width: 1,
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 10.0),
                      child: TextFormField(
                        decoration: const InputDecoration(
                          hintText: "Password again",
                          hintStyle: TextStyle(
                            fontFamily: 'Poppins',
                            // fontSize: 20,
                            color: Color.fromRGBO(165, 165, 165, 1),
                          ),
                          border: InputBorder.none,
                        ),
                        style: const TextStyle(
                          fontFamily: 'Poppins',
                          // fontSize: 20,
                          color: Colors.black, // input  text color
                        ),
                        validator: (val) =>
                        val! != password ? 'Passwords are different' : null,
                        obscureText: true,
                      ),
                    ),
                  ),

                  // Register
                  const SizedBox(height: 30),
                  Container(
                    width: 334,
                    height: 65,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: const Color.fromRGBO(119, 97, 255, 1.0),
                    ),
                    child: TextButton(
                      onPressed: () async {
                        if (_formKey.currentState!.validate()) {
                          setState(() => loading = true);
                          dynamic result = await _auth.registerWithEmailAndPassword(
                              email, password);
                          if (result == null) {
                            setState(() {
                              loading = false;
                              error = 'Please supply a valid email';
                            });
                          }
                        }

                        // // Handle Next button press
                        // print(email);
                        // print(password);
                        // print(phoneNumber);


                        //
                        // Navigator.push(
                        //   context,
                        //   MaterialPageRoute(builder: (context) => userRegisterSuccess()),
                        // );
                      },
                      child: const Text(
                        'Register',
                        style: TextStyle(
                          fontFamily: 'Poppins',
                          fontSize: 17,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),

                  const SizedBox(height: 20),
                ],
              ),
            ),
            Text(
              error,
              style: const TextStyle(color: Colors.red, fontSize: 14.0),
            ),

          ],
        ),
        )
      )

    );
  }
}