import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:vicharkranti/colors/Colors.dart';
import 'package:vicharkranti/helper/strings.dart';
import 'package:vicharkranti/main.dart';
import 'package:vicharkranti/screens/LoginScreen.dart';
import 'package:http/http.dart' as http;

class SignupScreen extends StatefulWidget {
  const SignupScreen({Key? key}) : super(key: key);

  @override
  State<SignupScreen> createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();
  TextEditingController confirmpasswordController = TextEditingController();
  TextEditingController usernameController = TextEditingController();
  TextEditingController mobilenumberController = TextEditingController();
  bool isValidated = false;
  bool isloading = false;
  bool isPasswordVisible1 = false;
  bool isPasswordVisible2 = false;
  final _formkey = GlobalKey<FormState>();

//api

  signup() async {
    setState(() {
      isValidated = true;
    });
    if (_formkey.currentState!.validate()) {
      setState(() {
        isloading = true;
      });
      try {
        var data = {
          "username": usernameController.text,
          "email": emailController.text,
          "mobileno": mobilenumberController.text,
          "password": passwordController.text,
        };
        final response = await http.post(
          Uri.parse(BaseUrl + "registration"),
          body: jsonEncode(data),
        );

        setState(() {
          isloading = false;
        });
        print(response.statusCode);

        if (response.statusCode == 200) {
          var resData = jsonDecode(response.body);
          //

          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            //backgroundColor: grey300,
            duration: const Duration(seconds: 3),
            content: Text(
              resData["message"], //
              style: GoogleFonts.kameron(
                fontSize: 15,
              ),
            ),
            behavior: SnackBarBehavior.floating,
            margin: const EdgeInsets.all(10.0),
            //animation:,
          ));

          if (resData["status"] == "true") {
            //
            Navigator.of(context).pushAndRemoveUntil(
                              MaterialPageRoute(builder: (_) => const LoginScreen()),
                              (route) => false);
          }
        }
      } on SocketException {
        // TODO
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          //backgroundColor: grey300,
          duration: const Duration(seconds: 3),
          content: Text(
            "Internet connection not available.", //
            style: GoogleFonts.kameron(
              fontSize: 15,
            ),
          ),
          behavior: SnackBarBehavior.floating,
          margin: const EdgeInsets.all(25.0),
          //animation:,
        ));
        setState(() {
          isloading = false;
        });
      } on HttpException {
        //message
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          //backgroundColor: grey300,
          duration: const Duration(seconds: 3),
          content: Text(
            "Something went wrong. Please try again later.", //
            style: GoogleFonts.kameron(
              fontSize: 15,
            ),
          ),
          behavior: SnackBarBehavior.floating,
          margin: const EdgeInsets.all(25.0),
          //animation:,
        ));
        setState(() {
          isloading = false;
        });
      } on FormatException {
        //message
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          //backgroundColor: grey300,
          duration: const Duration(seconds: 3),
          content: Text(
            "Something went wrong. Please try again later.", //
            style: GoogleFonts.kameron(
              fontSize: 15,
            ),
          ),
          behavior: SnackBarBehavior.floating,
          margin: const EdgeInsets.all(25.0),
          //animation:,
        ));
        setState(() {
          isloading = false;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: isDark ? dark1 : appWhite,
      body: SafeArea(
          child: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const SizedBox(
                height: 30,
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(0, 0, 20, 0),
                child: Center(
                  child: Container(
                    height: 150,
                    width: MediaQuery.of(context).size.width / 1.25,
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(
                          "assets/images/vichar_logo.png",
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(25, 0, 25, 0),
                child: Form(
                  key: _formkey,
                  child: Column(
                    children: [
                      SizedBox(
                        // height: 54,
                        child: TextFormField(
                          textCapitalization: TextCapitalization.sentences,
                          onChanged: (value) {
                            if (isValidated) {
                              _formkey.currentState!.validate();
                            }
                          },
                          validator: (value) {
                            if (value == null || value.isEmpty) {
                              return "Please enter valid username.";
                            }
                            return null;
                          },
                          controller: usernameController,
                          keyboardType: TextInputType.name,
                          decoration: InputDecoration(
                            contentPadding: const EdgeInsets.fromLTRB(0, 18, 0, 18),
                            hintText: "Username",
                            hintStyle: GoogleFonts.kameron(
                              color: grey,
                            ),
                            prefixIcon: const Padding(
                              padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
                              child: Icon(
                                Icons.person,
                                size: 21,
                                color: grey,
                              ),
                            ),
                            errorStyle: GoogleFonts.kameron(fontSize: 14),
                            focusedErrorBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appred),
                            ),
                            errorBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appred),
                            ),
                            enabledBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: grey),
                            ),
                            focusedBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appcolor),
                            ),
                          ),
                          cursorColor: appcolor,
                          cursorHeight: 21,
                          style: GoogleFonts.kameron(
                            color: isDark ? appWhite : appBlack87,
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 20,
                      ),
                      SizedBox(
                        //height: 54,
                        child: TextFormField(
                          onChanged: (value) {
                            if (isValidated) {
                              _formkey.currentState!.validate();
                            }
                          },
                          validator: (value) {
                            if (value == null ||
                                value.isEmpty ||
                                !(value.isEmail)) {
                              return "Please enter valid email.";
                            }
                            return null;
                          },
                          controller: emailController,
                          keyboardType: TextInputType.emailAddress,
                          decoration: InputDecoration(
                            contentPadding: const EdgeInsets.fromLTRB(0, 18, 0, 18),
                            hintText: "Email",
                            hintStyle: GoogleFonts.kameron(
                              color: grey,
                            ),
                            prefixIcon: const Padding(
                              padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
                              child: Icon(
                                Icons.email,
                                size: 21,
                                color: grey,
                              ),
                            ),
                            errorStyle: GoogleFonts.kameron(fontSize: 14),
                            focusedErrorBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appred),
                            ),
                            errorBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appred),
                            ),
                            enabledBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: grey),
                            ),
                            focusedBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appcolor),
                            ),
                          ),
                          cursorColor: appcolor,
                          cursorHeight: 21,
                          style: GoogleFonts.kameron(
                            color: isDark ? appWhite : appBlack87,
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 20,
                      ),
                      SizedBox(
                        // height: 54,
                        child: TextFormField(
                          onChanged: (value) {
                            if (isValidated) {
                              _formkey.currentState!.validate();
                            }
                          },
                          validator: (value) {
                            if (value == null ||
                                value.isEmpty ||
                                !(value.isPhoneNumber) ||
                                value.contains(".") ||
                                value.length < 10) {
                              return "Please enter valid mobile number.";
                            }
                            return null;
                          },
                          maxLength: 10,
                          controller: mobilenumberController,
                          keyboardType: TextInputType.phone,
                          decoration: InputDecoration(
                            contentPadding: const EdgeInsets.fromLTRB(0, 18, 0, 18),
                            counterText: "",
                            hintText: "Mobile Number",
                            hintStyle: GoogleFonts.kameron(
                              color: grey,
                            ),
                            prefixIcon: const Padding(
                              padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
                              child: Icon(
                                Icons.phone,
                                size: 21,
                                color: grey,
                              ),
                            ),
                            errorStyle: GoogleFonts.kameron(fontSize: 14),
                            focusedErrorBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appred),
                            ),
                            errorBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appred),
                            ),
                            enabledBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: grey),
                            ),
                            focusedBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appcolor),
                            ),
                          ),
                          cursorColor: appcolor,
                          cursorHeight: 21,
                          style: GoogleFonts.kameron(
                            color: isDark ? appWhite : appBlack87,
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 20,
                      ),
                      SizedBox(
                        // height: 54,
                        child: TextFormField(
                          onChanged: (value) {
                            if (isValidated) {
                              _formkey.currentState!.validate();
                            }
                          },
                          validator: (value) {
                            if (value == null || value.isEmpty) {
                              return "Please enter valid password.";
                            }
                            if (value.length < 6) {
                              return "Password length must be atleast 6 characters.";
                            }

                            return null;
                          },
                          controller: passwordController,
                          keyboardType: TextInputType.visiblePassword,
                          obscureText: isPasswordVisible1,
                          decoration: InputDecoration(
                            contentPadding: const EdgeInsets.fromLTRB(0, 18, 0, 18),
                            hintText: "Password",
                            hintStyle: GoogleFonts.kameron(
                              color: grey,
                            ),
                            prefixIcon: const Padding(
                              padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
                              child: Icon(
                                Icons.lock,
                                size: 21,
                                color: grey,
                              ),
                            ),
                            suffixIcon: Padding(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 7.5),
                              child: IconButton(
                                icon: Icon(
                                  !isPasswordVisible1
                                      ? Icons.visibility
                                      : Icons.visibility_off,
                                  color: grey,
                                ),
                                onPressed: () {
                                  setState(() {
                                    isPasswordVisible1 = !isPasswordVisible1;
                                  });
                                },
                              ),
                            ),
                            errorStyle: GoogleFonts.kameron(fontSize: 14),
                            focusedErrorBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appred),
                            ),
                            errorBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appred),
                            ),
                            enabledBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: grey),
                            ),
                            focusedBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appcolor),
                            ),
                          ),
                          cursorColor: appcolor,
                          cursorHeight: 21,
                          style: GoogleFonts.kameron(
                            color: isDark ? appWhite : appBlack87,
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 20,
                      ),
                      SizedBox(
                        //height: 54,
                        child: TextFormField(
                          onChanged: (value) {
                            if (isValidated) {
                              _formkey.currentState!.validate();
                            }
                          },
                          validator: (value) {
                            if (value == null || value.isEmpty) {
                              return "Please enter valid password.";
                            }
                            if (value.length < 6) {
                              return "Password length must be atleast 6 characters.";
                            }
                            if (value != passwordController.text) {
                              return "Passwords does not match.";
                            }

                            return null;
                          },
                          controller: confirmpasswordController,
                          keyboardType: TextInputType.visiblePassword,
                          obscureText: isPasswordVisible2,
                          decoration: InputDecoration(
                            contentPadding: const EdgeInsets.fromLTRB(0, 18, 0, 18),
                            hintText: "Confirm Password",
                            hintStyle: GoogleFonts.kameron(
                              color: grey,
                            ),
                            prefixIcon: const Padding(
                              padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
                              child: Icon(
                                Icons.lock,
                                size: 21,
                                color: grey,
                              ),
                            ),
                            suffixIcon: Padding(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 7.5),
                              child: IconButton(
                                icon: Icon(
                                  !isPasswordVisible2
                                      ? Icons.visibility
                                      : Icons.visibility_off,
                                  color: grey,
                                ),
                                onPressed: () {
                                  setState(() {
                                    isPasswordVisible2 = !isPasswordVisible2;
                                  });
                                },
                              ),
                            ),
                            errorStyle: GoogleFonts.kameron(fontSize: 14),
                            focusedErrorBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appred),
                            ),
                            errorBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appred),
                            ),
                            enabledBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: grey),
                            ),
                            focusedBorder: const OutlineInputBorder(
                              borderRadius: BorderRadius.all(
                                Radius.circular(27),
                              ),
                              borderSide: BorderSide(color: appcolor),
                            ),
                          ),
                          cursorColor: appcolor,
                          cursorHeight: 21,
                          style: GoogleFonts.kameron(
                            color: isDark ? appWhite : appBlack87,
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 35,
                      ),
                      SizedBox(
                        height: 54,
                        child: Center(
                          child: ElevatedButton(
                            style: ElevatedButton.styleFrom(
                              backgroundColor: isDark ? dark2 : appcolor,
                              fixedSize: const Size(400, 60),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(27),
                                side: BorderSide(
                                  color: isDark ? dark2 : appcolor,
                                ),
                              ),
                            ),
                            onPressed: () {
                              signup();
                            },
                            child: isloading
                                ? const CircularProgressIndicator(
                                    color: appWhite,
                                    strokeWidth: 2.5,
                                  )
                                : Text(
                                    'Signup',
                                    style: GoogleFonts.kameron(
                                      fontWeight: FontWeight.normal,
                                      fontSize: 18,
                                      color: Theme.of(context)
                                          .scaffoldBackgroundColor,
                                    ),
                                  ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 30,
                      ),
                      GestureDetector(
                        onTap: () {
                          Navigator.of(context).pushAndRemoveUntil(
                              MaterialPageRoute(builder: (_) => const LoginScreen()),
                              (route) => false);
                        },
                        child: Center(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                "Already have an account? ",
                                style: GoogleFonts.kameron(
                                  fontSize: 15,
                                  color: grey,
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                              Text(
                                "Login",
                                style: GoogleFonts.kameron(
                                  fontSize: 15,
                                  color: Theme.of(context).primaryColor,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      const SizedBox(
                        height: 20,
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      )),
    );
  }
}