import 'dart:math';

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:page_transition/page_transition.dart';


import './login.dart';

final FirebaseAuth _auth = FirebaseAuth.instance;


class Register extends StatefulWidget {
  final String title = 'Registration';

  @override
  State<StatefulWidget> createState() => RegisterState();
}

class RegisterState extends State<Register> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  bool _success;
  String _userEmail;
  String val;


  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
      statusBarColor: Colors.yellow.shade800,
      ));

    return Stack(children: <Widget>[
      Container(color: Color(0xFF18181C)),

      Container(
        alignment: Alignment.topCenter,
        color: Color(0xFF232428),
        margin:
        const EdgeInsets.only(left: 0.0, right: 0.0, top: 0.0, bottom: 0.0),
        child: new Image.asset('images/login2.png',
                                   width: 300.0, height: 248.0, alignment: Alignment.center),
        ),
      Container(
        alignment: Alignment.topCenter,
        color: Color(0xFF232428),
        margin: const EdgeInsets.only(
            left: 0.0, right: 0.0, top: 260.0, bottom: 0.0),
        child: new Image.asset('images/login_title_register.png',
                                   width: 58.0, height: 14.0, alignment: Alignment.center),
        ),

      Container(

          alignment: Alignment.topCenter,

          child: Form(
              key: _formKey,
              child: GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () {
                    SystemChannels.textInput.invokeMethod('TextInput.hide');
//            FocusScope.of(context).requestFocus(new FocusNode());
                  },
                  child: Card(
                      elevation: 0,
                      margin: const EdgeInsets.only(
                          top: 280.0, bottom: 0.0, right: 0.0, left: 0.0),

                      child: Container(
                          padding: const EdgeInsets.all(20.0),
                          height: 243.0,
                          width: 350.0,
                          color: Color(0xFF232428),
                          child: new Column(children: <Widget>[
                            new TextFormField(
                                    cursorColor: Color(0xFFEDAC0B),
                                    style: TextStyle(
                                        color: Color(0xFF606060),
                                        fontWeight: FontWeight.w300),
                                    controller: _emailController,
                                    validator: (String value) {
                                      if (value.isEmpty) {
                                        return 'Please Enter A Valid Email';
                                      }
                                      if(RegExp(r'(\w+@\w+\.\w+)').stringMatch(val) != val)
                                        return 'Please Enter A Valid E-Mail';
                                    },
                                    keyboardType: TextInputType.emailAddress,
                                    decoration: new InputDecoration(
                                      enabledBorder: OutlineInputBorder(
                                        borderRadius:
                                            BorderRadius.circular(10.0),
                                        borderSide: const BorderSide(
                                            color: Color(0xFFEDAC0B),
                                            width: 0.0),
                                      ),
                                      focusedBorder: OutlineInputBorder(
                                        borderRadius:
                                            BorderRadius.circular(10.0),
                                        borderSide: const BorderSide(
                                            color: Color(0xFFEDAC0B)),
                                      ),
                                      labelText: 'Email',
                                      labelStyle: TextStyle(
                                          color: Color(0xFF606060),
                                          fontWeight: FontWeight.w300),
                                      hintStyle: TextStyle(
                                          color: Color(0xFF606060),
                                          fontWeight: FontWeight.w300),
                                      prefixIcon: new Icon(Icons.email,
                                          color: Color(0xFFEDAC0B)),
                                    ),
                                  ),
                                  new Container(
                                    height: 8.0,
                                  ),
                                  new TextFormField(
                                    cursorColor: Color(0xFFEDAC0B),
                                    controller: _passwordController,
                                    validator: (String value) {
                                      if (value.isEmpty) {
                                        return 'Please Enter A Valid Password';
                                      }
                                      if(value.length < 7)
                                        return '6 Characters Min.';
                                    },
                                    style: TextStyle(
                                        color: Color(0xFF606060),
                                        fontWeight: FontWeight.w300),
                                    keyboardType: TextInputType.text,
                                    decoration: new InputDecoration(
                                      enabledBorder: OutlineInputBorder(
                                        borderRadius:
                                            BorderRadius.circular(10.0),
                                        borderSide: const BorderSide(
                                            color: Color(0xFFEDAC0B),
                                            width: 0.0),
                                      ),
                                      focusedBorder: OutlineInputBorder(
                                        borderRadius:
                                            BorderRadius.circular(10.0),
                                        borderSide: const BorderSide(
                                            color: Color(0xFFEDAC0B)),
                                      ),
                                      labelText: 'Password',
                                      labelStyle: TextStyle(
                                          color: Color(0xFF606060),
                                          fontWeight: FontWeight.w300),
                                      hintText: "(6) Characters Min.",
                                      hintStyle: TextStyle(
                                          color: Color(0xFF606060),
                                          fontWeight: FontWeight.w300),
                                      prefixIcon: new Icon(Icons.lock,
                                          color: Color(0xFFEDAC0B)),
                                    ),
                                    obscureText: false,
                              ),




                          ]
                                            )
                          )

                      )

                  ))

          ),




      new Container(
          alignment: Alignment.bottomRight,
          margin: const EdgeInsets.only(
              left: 0.0, right: 30.0, top: 0.0, bottom: 48.0),
          child: GestureDetector(
            onTap: () async {
    if (_formKey.currentState.validate()) {
    _register();
                                    }


              print("Finished Registration (back to login) Button Clicked");
            },
            child: Image.asset(
              'images/login_button_redarrow.png',
              width: 40.0,
              height: 40.0,
              ),
            )),




      new Container(
          alignment: Alignment.bottomCenter,
          margin: const EdgeInsets.only(
              left: 0.0, right: 00.0, top: 0.0, bottom: 10.0),

          child: new Image.asset(
            'images/footer2.png',
            width: 123.0,
            height: 14.0,
            )),






    ]);
  }
  @override
  void dispose() {
    // Clean up the controller when the Widget is disposed
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  // Example code for registration.
  void _register() async {
    final FirebaseUser user = await _auth.createUserWithEmailAndPassword(
      email: _emailController.text,
      password: _passwordController.text,
      );
    if (user != null) {
      setState(() {
        _success = true;
        Navigator.pop(
            context,
            new MaterialPageRoute(
                maintainState: true, builder: (context) => new Login()));

        _userEmail = user.email;
      });
    } else {
      _success = false;
    }
  }
}