import 'package:edge_alert/edge_alert.dart';
import 'package:email_validator/email_validator.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:job_app/config/palette.dart';
import 'package:job_app/models/user/user.dart';
import 'package:job_app/services/Auth/getCurrentUser.dart';
import 'package:job_app/services/Auth/loginService.dart';
import 'package:job_app/services/Auth/registerService.dart';
import 'package:job_app/singletons/profile_image.dart';
import 'package:job_app/views/reset%20password/forgot_password.dart';
import 'package:job_app/widgets/city_dropdown.dart';
import 'package:job_app/widgets/country_dropdown.dart';
import 'package:job_app/widgets/loading_screen.dart';
import 'package:job_app/widgets/profile_image.dart';

class LoginRegister extends StatefulWidget {
  @override
  _LoginRegisterState createState() => _LoginRegisterState();
}

class _LoginRegisterState extends State<LoginRegister> {
  bool isSignUpScreen = false;
  bool isValidMail;
  bool mustExpand = true;
  UserModel userModel = UserModel();
  bool isLoading = false;
  GlobalKey<FormState> _globalKey = GlobalKey<FormState>();

  String email = '';
  final emailController = TextEditingController();

  String userName = '';
  final userNameController = TextEditingController();

  String password = '';
  final passwordController = TextEditingController();

  String confirmPassword = '';
  final confirmPasswordController = TextEditingController();

  String firstName = '';
  final firstNameController = TextEditingController();

  String lastName = '';
  final lastNameController = TextEditingController();

  String jobTitle = '';
  final jobTitleController = TextEditingController();

  String phoneNumber = '';
  final phoneNumberController = TextEditingController();

  List<String> countryList = ["Tunisia"];
  String countryValue;
  bool isCountryValid = true;

  List<String> cityList = ["Tunis", "ElKef", "Tatouine"];
  String cityValue;
  bool isCityValid = true;
  double signInHeight = 750;
  int countryId;

  void onCountryChange(String newValue, int id) {
    setState(() {
      countryValue = newValue;
      countryId = id;
    });
  }

  void onCityChange(newValue) {
    setState(() {
      cityValue = newValue;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    emailController.dispose();
    firstNameController.dispose();
    lastNameController.dispose();
    phoneNumberController.dispose();
    jobTitleController.dispose();
    passwordController.dispose();
    userNameController.dispose();
    confirmPasswordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    String upperIcon = isSignUpScreen ? 'SignUp_Icon.svg' : 'SignIn_Icon.svg';
    return Stack(children: [
      GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(new FocusNode());
        },
        child: Scaffold(
          backgroundColor: Palette.backgroundColor,
          body: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Container(
                  padding: EdgeInsets.only(top: 20),
                  child: SvgPicture.asset(
                    "assets/icons/LoginRegister/$upperIcon",
                    width: 200,
                    height: 200,
                  ),
                ),
                SizedBox(
                  height: 40,
                ),
                Container(
                  padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
                  height: isSignUpScreen ? signInHeight : 325,
                  //mustExpand ? 413 : isSignUpScreen ?650 :325,
                  width: 320,
                  margin: EdgeInsets.symmetric(horizontal: 20),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(5)),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          GestureDetector(
                            onTap: () {
                              setState(() {
                                emailController.clear();
                                passwordController.clear();
                                isSignUpScreen = false;
                                mustExpand = false;
                                imagePicked.image = null;
                                signInHeight = 750;
                                isCityValid = true;
                                isCountryValid = true;
                                FocusScope.of(context)
                                    .requestFocus(new FocusNode());
                                _globalKey.currentState.reset();
                              });
                            },
                            child: Column(
                              children: [
                                Column(
                                  children: [
                                    Text(
                                      'Sign In',
                                      style: TextStyle(fontSize: 16),
                                    ),
                                    if (!isSignUpScreen)
                                      Container(
                                        margin: EdgeInsets.only(top: 3),
                                        height: 3,
                                        decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(100),
                                          color: isSignUpScreen
                                              ? Colors.transparent
                                              : Colors.black,
                                        ),
                                        width: 60,
                                      ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                          GestureDetector(
                            onTap: () {
                              setState(() {
                                emailController.clear();
                                userNameController.clear();
                                passwordController.clear();
                                confirmPasswordController.clear();
                                isSignUpScreen = true;
                                signInHeight = 750;
                                isCityValid = true;
                                isCountryValid = true;
                                mustExpand = false;
                                FocusScope.of(context)
                                    .requestFocus(new FocusNode());
                                _globalKey.currentState.reset();
                              });
                            },
                            child: Column(
                              children: [
                                Text(
                                  'Sign Up',
                                  style: TextStyle(fontSize: 16),
                                ),
                                if (isSignUpScreen)
                                  Container(
                                    margin: EdgeInsets.only(top: 3),
                                    height: 3,
                                    width: 60,
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(100),
                                      color: isSignUpScreen
                                          ? Colors.black
                                          : Colors.transparent,
                                    ),
                                  ),
                              ],
                            ),
                          ),
                        ],
                      ),
                      Divider(
                        indent: 5,
                        endIndent: 10,
                        height: 0,
                        thickness: 1,
                        color: Palette.backgroundColor,
                      ),
                      Container(
                        margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
                        child: Form(
                          key: _globalKey,
                          child: Column(
                            children: [
                              if (isSignUpScreen)
                                Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(0, 20, 0, 30),
                                  child: Column(
                                    children: [
                                      SizedBox(
                                          height: 120,
                                          width: 120,
                                          child: ProfileImagePicker()),
                                      Text(
                                        "Your photo",
                                        style: TextStyle(
                                          fontFamily: 'MontserratExtraLight',
                                          color: Color.fromRGBO(0, 0, 0, 0.5),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              if (isSignUpScreen)
                                buildTextField("First name", false, false,
                                    false, firstNameController, _globalKey),
                              if (isSignUpScreen)
                                buildTextField("Last name", false, false, false,
                                    lastNameController, _globalKey),
                              if (isSignUpScreen)
                                buildTextField("Phone number", false, false,
                                    true, phoneNumberController, _globalKey),
                              if (isSignUpScreen)
                                buildTextField(
                                    "Professional title / Job title",
                                    false,
                                    false,
                                    false,
                                    jobTitleController,
                                    _globalKey),
                              buildTextField(
                                isSignUpScreen ? "Email" : "Email or Username",
                                false,
                                true,
                                false,
                                emailController,
                                _globalKey,
                              ),
                              buildTextField(
                                "Password",
                                true,
                                false,
                                false,
                                passwordController,
                                _globalKey,
                              ),
                              if (isSignUpScreen)
                                buildTextField(
                                  "Confirm Password",
                                  true,
                                  false,
                                  false,
                                  confirmPasswordController,
                                  _globalKey,
                                ),
                              if (isSignUpScreen)
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    CountryDropDown(
                                      isCountryValid: true,
                                      changeCountry: onCountryChange,
                                    ),
                                    //buildDropDown("Country", true),
                                    SizedBox(
                                      width: 10,
                                    ),
                                    CityDropDrown(
                                      isCityValid: true,
                                      changeCity: onCityChange,
                                      countryIndex: countryId,
                                    ),
                                  ],
                                ),
                              if (!isSignUpScreen)
                                Container(
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      TextButton(
                                          style: ButtonStyle(
                                              overlayColor:
                                                  MaterialStateProperty
                                                      .resolveWith((states) =>
                                                          Colors.transparent)),
                                          onPressed: () {
                                            Navigator.push(
                                              context,
                                              MaterialPageRoute(builder: (context) => ForgetPassword()),
                                            );
                                          },
                                          child: Text(
                                            "Forgot Password ?",
                                            style: TextStyle(
                                                fontFamily: 'MontserratRegular',
                                                fontWeight: FontWeight.bold,
                                                decoration:
                                                    TextDecoration.underline,
                                                color: Colors.black
                                                    .withOpacity(0.8)),
                                          )),
                                    ],
                                  ),
                                ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.fromLTRB(0, mustExpand ? 30 : 50, 0, 0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SizedBox(
                        width: 250,
                        height: 45,
                        child: ElevatedButton(
                          onPressed: () async {
                            if (isSignUpScreen) {
                              if (_globalKey.currentState.validate() &&
                                  isCountryValid &&
                                  isCityValid) {
                                //changer(data);
                                if (imagePicked.image == null) {
                                  EdgeAlert.show(context,
                                      title: "Please select your profile image",
                                      gravity: EdgeAlert.BOTTOM,
                                      backgroundColor: Colors.redAccent);
                                } else {
                                  setState(() {
                                    isLoading = true;
                                  });
                                  RegisterService register = RegisterService();
                                  final response = await register.registerUser(
                                      firstName: firstName,
                                      lastName: lastName,
                                      phoneNumber: phoneNumber,
                                      jobTitle: jobTitle,
                                      email: email,
                                      password: password,
                                      file: imagePicked.image,
                                      country: countryValue,
                                      city: cityValue);

                                  if (register.userModel != null) {
                                    userModel = register.userModel;
                                    LoginService login = LoginService();
                                    await login.loginUser(email, password);
                                    if (login.loginModel != null &&
                                        login.loginModel.roles
                                            .contains("ROLE_USER")) {
                                      GetCurrentUserService currentUser =
                                          GetCurrentUserService();
                                      await currentUser.getCurrentUser();
                                      setState(() {
                                        isLoading = false;
                                      });
                                      Navigator.pop(context);
                                    }
                                  } else {
                                    setState(() {
                                      isLoading = false;
                                    });
                                    EdgeAlert.show(context,
                                        title: response.errorMessage,
                                        gravity: EdgeAlert.BOTTOM,
                                        backgroundColor: Colors.redAccent);
                                  }
                                }
                              } else if (!_globalKey.currentState.validate()) {
                                setState(() {
                                  signInHeight = 900;
                                });
                              }
                            } else if (!isSignUpScreen) {
                              if (_globalKey.currentState.validate()) {
                                setState(() {
                                  isLoading = true;
                                });
                                LoginService login = LoginService();
                                await login.loginUser(userName, password);
                                if (login.loginModel != null &&
                                    login.loginModel.roles
                                        .contains("ROLE_USER")) {
                                  GetCurrentUserService currentUser =
                                      GetCurrentUserService();
                                  await currentUser.getCurrentUser();
                                  setState(() {
                                    isLoading = false;
                                  });
                                  Navigator.pop(context);
                                } else {
                                  setState(() {
                                    isLoading = false;
                                  });
                                  EdgeAlert.show(context,
                                      title: "Email is not valid",
                                      gravity: EdgeAlert.BOTTOM,
                                      backgroundColor: Colors.redAccent);
                                }
                              }
                            }
                          },
                          child: Text(
                            isSignUpScreen ? "Sign Up" : "Sign In",
                            style: TextStyle(
                              fontFamily: 'MontserratRegular',
                            ),
                          ),
                          style: ElevatedButton.styleFrom(
                            primary: Palette.primary,
                            onPrimary: Colors.white,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(5.0),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
      if (isLoading) LoadingScreen()
    ]);
  }

  Widget buildTextField(String hintText, bool isPassword, bool isEmail,
      bool isNumber, TextEditingController controller, GlobalKey _key) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(0, 0, 0, 12),
      child: TextFormField(
        validator: (val) {
          if (hintText == 'First name') {
            if (val.isEmpty) {
              return "Enter your first name";
            } else if (val.length < 2) {
              return "First name is too short";
            }
          }
          if (hintText == 'Last name') {
            if (val.isEmpty) {
              return "Enter your last name";
            } else if (val.length < 2) {
              return "Last name is too short";
            }
          }
          if (hintText == 'Phone number') {
            if (val.isEmpty) {
              return "Enter your phone number";
            } else if (val.length < 8) {
              return "Phone number is too short";
            }
          }
          if (hintText == 'Phone number') {
            if (val.isEmpty) {
              return "Enter your phone number";
            } else if (val.length < 8) {
              return "Phone number is too short";
            }
          }
          if (hintText == 'Professional title / Job title') {
            if (val.isEmpty) {
              return "Enter your job title";
            } else if (val.length < 3) {
              return "Job title is too short";
            }
          }
          if (hintText == 'Email') {
            if (val.isEmpty) {
              return "Enter your Email";
            } else if (!EmailValidator.validate(val) && isSignUpScreen) {
              return "Enter a valid Email";
            }
          }
          if (hintText == 'Password') {
            if (val.isEmpty) {
              return "Enter a valid Password";
            } else if (val.length < 3) {
              return "Password must contain at least 8 characters";
            }
          }
          if (hintText == 'Confirm Password') {
            if (val.isEmpty || confirmPassword != password) {
              return "Confirmation Password don't match";
            }
          }
          if (hintText == 'Email or Username') {
            if (val.isEmpty) {
              return "Enter your Email or Username";
            }
          }
          return null;
        },
        onChanged: (val) {
          setState(() {
            switch (hintText) {
              case 'First name':
                firstName = val;
                break;
              case 'Last name':
                lastName = val;
                break;
              case 'Phone number':
                phoneNumber = val;
                break;
              case 'Professional title / Job title':
                jobTitle = val;
                break;
              case 'Email':
                email = val;
                break;
              case 'Password':
                password = val;
                break;
              case 'Confirm Password':
                confirmPassword = val;
                break;
              case 'Email or Username':
                userName = val;
                break;
            }
          });
        },
        obscureText: isPassword,
        autocorrect: false,
        keyboardType: isEmail
            ? TextInputType.emailAddress
            : isNumber
                ? TextInputType.phone
                : TextInputType.text,
        cursorColor: Colors.black,
        decoration: InputDecoration(
          focusedErrorBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5),
              borderSide: BorderSide(color: Colors.red)),
          errorBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red),
              borderRadius: BorderRadius.circular(5)),
          fillColor: Palette.backgroundColor,
          filled: true,
          enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5),
              borderSide: BorderSide.none),
          focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5),
              borderSide: BorderSide.none),
          hintText: hintText,
          contentPadding: EdgeInsets.fromLTRB(15, 0, 0, 0),
          hintStyle: TextStyle(fontSize: 14, color: Palette.hintText),
        ),
      ),
    );
  }

  Widget buildDropDown(String hintText, bool isCountry) {
    List<String> list = isCountry ? countryList : cityList;
    return Container(
      width: 135,
      height: 40,
      padding: EdgeInsets.fromLTRB(15, 0, 10, 0),
      decoration: BoxDecoration(
          color: Palette.backgroundColor,
          borderRadius: BorderRadius.circular(5),
          border: Border.all(
              color: (!isCountryValid || !isCityValid)
                  ? Colors.red
                  : Colors.transparent)),
      child: DropdownButtonHideUnderline(
        child: DropdownButtonFormField<String>(
          value: isCountry ? countryValue : cityValue,
          icon: const Icon(Icons.keyboard_arrow_down),
          iconSize: 24,
          iconEnabledColor: Colors.black,
          elevation: 16,
          isExpanded: true,
          validator: (val) {
            if (val == null && isCountry) {
              setState(() {
                isCountryValid = false;
              });
            } else if (val == null && !isCountry) {
              setState(() {
                isCityValid = false;
              });
            }
            return null;
          },
          style: const TextStyle(
              color: Colors.black,
              fontSize: 15,
              fontWeight: FontWeight.bold,
              fontFamily: 'MontserratExtraLight'),
          decoration: InputDecoration(
            contentPadding: EdgeInsets.all(5),
            enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(5),
                borderSide: BorderSide.none),
            focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(5),
                borderSide: BorderSide.none),
          ),
          hint: Text(
            hintText,
            style: TextStyle(
                color: Palette.hintText,
                fontSize: 13,
                fontWeight: FontWeight.bold,
                fontFamily: 'MontserratExtraLight'),
          ),
          onChanged: (String newValue) {
            setState(() {
              isCountry ? countryValue = newValue : cityValue = newValue;
              if (isCountry) {
                isCountryValid = true;
              } else {
                isCityValid = true;
              }
            });
          },
          items: list.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ),
    );
  }
}