import 'package:car_for_her/config/palette.dart';
import 'package:car_for_her/config/styles.dart';
import 'package:car_for_her/singletons/profile_image.dart';
import 'package:car_for_her/widgets/profile_image_picker.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:image_picker/image_picker.dart';
import 'package:toast/toast.dart';

class ClientSignUp extends StatefulWidget {
  ClientSignUp({Key key}) : super(key: key);

  @override
  _ClientSignUpState createState() => _ClientSignUpState();
}

class _ClientSignUpState extends State<ClientSignUp> {
  GlobalKey<FormState> _globalKey = GlobalKey<FormState>();
  String fullName;
  TextEditingController fullNameController = TextEditingController();
  String phoneNumber;
  TextEditingController phoneNumberController =TextEditingController();
  String idCard;
  TextEditingController idCardController = TextEditingController();
  bool isMale = false;
  bool isFemale = false;
  bool isOther=false;
  bool noGender=false;
  String gender;

  void setGender() {
    if (isMale) {
      gender = "Male";
    } else if (isFemale) {
      gender = "Female";
    } else if(isOther){
      gender="Other";
    } else {
      gender = "none";
    }
  }
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    imagePicked.image=null;
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(new FocusNode());
      },
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        body: Container(
          child: Column(
            children: [
              Center(
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(0, 60, 0, 0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "Sign up",
                        style: TextStyle(fontFamily: 'MontHeavy', fontSize: 44),
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 25),
                        width: 104,
                        height: 104,
                        child: ProfileImagePicker(),
                      ),
                      Text(
                        "Your photo",
                        style: TextStyle(
                            fontFamily: 'MontExtraLight', fontSize: 16),
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(15, 25, 15, 0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            Text(
                              "Personal informations",
                              style: TextStyle(
                                  fontFamily: 'MontExtraLight',
                                  fontWeight: FontWeight.bold),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(top: 8.0),
                              child: Form(
                                key: _globalKey,
                                  child: Column(
                                children: [
                                  TextFormField(
                                    onChanged: (val){
                                      setState(() {
                                        fullName=val;
                                      });
                                    },
                                    validator: (val){
                                      if(val.isEmpty){
                                        return "Please enter your full name";
                                      }else if(val.length<3){
                                        return "Full name must at least contain 3 characters";
                                      }
                                      return null;
                                    },
                                    decoration: InputDecoration(
                                      hintText: "Your full name",
                                      errorBorder: AppTheme.textFormFieldErrorBorder,
                                      focusedErrorBorder: AppTheme.textFormFieldErrorBorder,
                                      focusedBorder:
                                          AppTheme.textFormFieldBorder,
                                      enabledBorder:
                                          AppTheme.textFormFieldBorder,
                                      hintStyle: AppTheme.hintTextStyle,
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(top: 8.0),
                                    child: TextFormField(
                                      onChanged: (val){
                                        setState(() {
                                          phoneNumber=val;
                                        });
                                      },
                                      validator: (val){
                                        if(val.isEmpty){
                                          return "Please enter your phone number";
                                        }else if(int.tryParse(val)==null){
                                          return "Phone number must container only digits";
                                        }
                                        return null;
                                      },
                                      keyboardType: TextInputType.number,
                                      decoration: InputDecoration(
                                        errorBorder: AppTheme.textFormFieldErrorBorder,
                                        focusedErrorBorder: AppTheme.textFormFieldErrorBorder,
                                        hintText: "Phone number",
                                        focusedBorder:
                                            AppTheme.textFormFieldBorder,
                                        enabledBorder:
                                            AppTheme.textFormFieldBorder,
                                        hintStyle: AppTheme.hintTextStyle,
                                      ),
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(top: 8.0),
                                    child: TextFormField(
                                      onChanged: (val){
                                        setState(() {
                                          idCard=val;
                                        });
                                      },
                                      validator: (val){
                                        if(val.isEmpty){
                                          return "Please enter your Id card number";
                                        }else if(int.tryParse(val)==null){
                                          return "Id card number must container only digits";
                                        }
                                        return null;
                                      },
                                      keyboardType: TextInputType.number,
                                      decoration: InputDecoration(
                                        errorBorder: AppTheme.textFormFieldErrorBorder,
                                        focusedErrorBorder: AppTheme.textFormFieldErrorBorder,
                                        hintText: "ID Card number",
                                        focusedBorder:
                                            AppTheme.textFormFieldBorder,
                                        enabledBorder:
                                            AppTheme.textFormFieldBorder,
                                        hintStyle: AppTheme.hintTextStyle,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(top: 8.0),
                                    height: 55,
                                    decoration: BoxDecoration(
                                        border: Border.all(
                                            color:
                                                noGender? Colors.red:Color.fromRGBO(0, 0, 0, 0.5))),
                                    child: Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        children: [
                                          Text(
                                            "I'am a...",
                                            style: TextStyle(
                                                fontFamily: 'MontExtraLight',
                                                fontWeight: FontWeight.bold),
                                          ),
                                          Checkbox(
                                              activeColor: Palette.primary,
                                              value: isMale,
                                              onChanged: (val) {
                                                setState(() {
                                                  isMale = val;
                                                  isFemale = false;
                                                  isOther =false;
                                                  noGender=false;
                                                  setGender();
                                                });
                                              }),
                                          Text(
                                            "Male",
                                            style: TextStyle(
                                                fontFamily: 'MontExtraLight',
                                                fontWeight: FontWeight.bold),
                                          ),
                                          Checkbox(
                                              activeColor: Palette.primary,
                                              value: isFemale,
                                              onChanged: (val) {
                                                setState(() {
                                                  isFemale = val;
                                                  isMale = false;
                                                  isOther=false;
                                                  noGender=false;
                                                  setGender();
                                                });
                                              }),
                                          Text(
                                            "Female",
                                            style: TextStyle(
                                                fontFamily: 'MontExtraLight',
                                                fontWeight: FontWeight.bold),
                                          ),
                                          Checkbox(
                                              activeColor: Palette.primary,
                                              value: isOther,
                                              onChanged: (val) {
                                                setState(() {
                                                  isOther = val;
                                                  isMale = false;
                                                  isFemale = false;
                                                  noGender=false;
                                                  setGender();
                                                });
                                              }),
                                          Text(
                                            "Other",
                                            style: TextStyle(
                                                fontFamily: 'MontExtraLight',
                                                fontWeight: FontWeight.bold),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(top: 24.0),
                                    width: double.maxFinite,
                                    color: Palette.primary,
                                    child: TextButton(
                                        onPressed: () {
                                          if(_globalKey.currentState.validate() && (isFemale || isMale || isOther) && imagePicked.image!=null){
                                            Navigator.pushNamed(
                                                context, '/client_navigator');
                                          }else if(!isFemale && !isMale && !isOther){
                                            setState(() {
                                              noGender=true;
                                            });
                                          }else if(imagePicked.image==null){
                                            Toast.show("Profile image is required", context, duration: Toast.LENGTH_LONG, gravity:  Toast.BOTTOM, backgroundColor: Color.fromRGBO(255, 0, 0, 0.7));
                                          }

                                        },
                                        child: Text(
                                          "Continue",
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontFamily: 'MontExtraLight',
                                              fontWeight: FontWeight.bold,
                                              fontSize: 18),
                                        )),
                                  )
                                ],
                              )),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(right: 0, bottom: 0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        "Sign up",
                        style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.1),
                            fontFamily: "MontHeavy",
                            fontWeight: FontWeight.bold,
                            fontSize: 40),
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}