import 'package:flutter/material.dart';

class SignUp extends StatefulWidget {
  @override
  _SignUpState createState() => _SignUpState();
}

class _SignUpState extends State<SignUp> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    double _height = MediaQuery.of(context).size.height;
    double _width = MediaQuery.of(context).size.width;
    return Scaffold(
        body: SafeArea(
            child: Container(
      color: Colors.white,
      height: _height,
      width: _width,
      child: SingleChildScrollView(
        padding: const EdgeInsets.only(),
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 8.0, left: 12.0, bottom: 20),
              child: Stack(
                children: <Widget>[
                  GestureDetector(
                      child: Icon(Icons.keyboard_backspace),
                      onTap: () {
                        if (_currentIndex > 0) {
                          setState(() {
                            _currentIndex = _currentIndex - 1;
                          });
                        } else {
                          return null;
                        }
                      }),
                  Container(
                    alignment: Alignment.center,
                    child: Text(
                      'Sign Up',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 25.0,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              color: Colors.white,
              height: _height * 0.8,
              width: _width,
              child: _buildTheListOfContainers(context)[_currentIndex],
            )
          ],
        ),
      ),
    )));
  }

  List<Widget> _buildTheListOfContainers(BuildContext context) {
    List<Widget> containers = [
      _buildSignUpContainer(
        context: context,
        text: 'When\'s your birthday?',
        labelText: 'BIRTHDAY',
        function: () {
          _currentIndex = _currentIndex + 1;
        },
        hintText: 'dd/mm/yyyy',
      ),
      _buildSignUpContainer(
        context: context,
        text : 'What\'s your email?',
        labelText: 'E-mail',
        function: () {
          _currentIndex = _currentIndex + 1;
        },
      ),
      _buildSignUpContainer(
        context:context,
        text: 'Create a password',
        labelText: 'Password',
        function:() {
          _currentIndex = _currentIndex + 1;
        },
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
        _buildSignUpContainer(
        context: context,
        text: 'Create a username',
        labelText:'Username',
        function: () {
          //_currentIndex = _currentIndex + 1;
        },
        buttonText:'SIGN UP',
      ),
      Padding(
        padding: const EdgeInsets.only(top: 10.0, left: 20.0),
        child: Row(children: <Widget>[
          Text('By pressing Sign Up, you agree to the '),
          GestureDetector(child: Text('Terms and Condition.', style: TextStyle(color: Colors.amber, decoration: TextDecoration.underline)), onTap: () => null,)
        ],),
      )
      ],)

    ];
    return containers;
  }

  Widget _buildSignUpContainer(
      {BuildContext context,
      String text,
      String labelText,
      Function function,
      String hintText = '',
      String buttonText = 'CONTINUE'}) {
    return Container(
      margin: const EdgeInsets.only(top: 50),
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(
              left: 20.0,
            ),
            child: Text(
              text,
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20.0, right: 20.0),
            child: TextField(
              decoration:
                  InputDecoration(labelText: labelText, hintText: hintText,),
                  keyboardType: labelText == 'BIRTHDAY' ? TextInputType.number : TextInputType.text
            ),
          ),
          InkWell(
            onTap: () {
              setState(() {
                function();
              });
            },
            child: Container(
              margin: const EdgeInsets.only(left: 20, right: 20, top: 35),
              alignment: Alignment.center,
              width: 400,
              height: 45.0,
              decoration: BoxDecoration(
                color: Colors.orange[400],
                border: Border.all(color: Colors.white, width: 2.0),
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Text(
                buttonText,
                style: TextStyle(fontSize: 18.0, color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}