import 'package:app_hit_a_wod/src/providers/api.provider.dart';
import 'package:flutter/material.dart';
import 'package:app_hit_a_wod/src/styles.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
import 'package:provider/provider.dart';


class ForgotPasswordPage extends StatefulWidget {
  @override
  _ForgotPasswordPageState createState() => _ForgotPasswordPageState();
}

class _ForgotPasswordPageState extends State<ForgotPasswordPage> {

  TextEditingController _email = new TextEditingController();

  ApiProvider _api;

  bool _error = false;
  String _errorText;
  bool _loading = false;

  @override
  Widget build(BuildContext context) {

    _api = Provider.of<ApiProvider>(context);

    return GestureDetector(
      onTap: () {
        FocusScopeNode currentFocus = FocusScope.of(context);
        if (!currentFocus.hasPrimaryFocus) {
          currentFocus.unfocus();
        }
      },
      child: Container(
        decoration: BoxDecoration(
          gradient: neuGradient
        ),
        child: SafeArea(
          child: Scaffold(
            resizeToAvoidBottomPadding: false,
            backgroundColor: Colors.transparent,
            body: Container(
              height: MediaQuery.of(context).size.height,
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child: Column(
                children: <Widget>[
                  SizedBox(height: 50),
                  logo(),
                  SizedBox(height: 80),
                  Text(
                    "Recuperar contraseña",
                    style: Theme.of(context).textTheme.title
                  ),
                  SizedBox(height: 30),
                  emailInput(),
                  SizedBox(height: 10),
                  errorText(),
                  Expanded(child: SizedBox()),
                  resetPasswordButton(),
                  SizedBox(height: 20),
                  loginText(),
                  SizedBox(height: 30)
                ]
              )
            )
          )
        )
      ),
    );
  }

  logo() => Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Image(
        image: AssetImage("assets/icon/logo.png"),
        width: 100,
      ),
      SizedBox(height: 10),
      Image(
        image: AssetImage("assets/icon/nom.png"),
        width: 185,
      )
    ],
  );

  emailInput() => neuInput(
    TextFormField(
      controller: _email,
      cursorColor: Color.fromRGBO(141, 39, 144, 1),
      keyboardType: TextInputType.emailAddress,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.symmetric(vertical: 20, horizontal: 5),
        border: InputBorder.none,
        hintText: 'Tu correo electrónico'
      ),
      textInputAction: TextInputAction.send,
    ),
  );

  resetPasswordButton() {
    //info
    final childrenNormal = [
      Text("Restablecer contraseña", style: Theme.of(context).textTheme.display2)
    ];
    final childrenLogging = [
      CircularProgressIndicator(strokeWidth: 3, backgroundColor: Colors.transparent, valueColor: new AlwaysStoppedAnimation<Color>(Color(0xFFF8F8FC)),)
    ];

    return NeumorphicButton(
      padding: EdgeInsets.symmetric(vertical: 25, horizontal: 20),
      boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(40)),
      style: NeumorphicStyle(
        color: colors['primary']
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: _loading ? childrenLogging : childrenNormal
      ),
      onClick: () {
        setState(() {
          _loading = true;
          _error = false;
        });
        this._api.sendPasswordResetLink(_email.text).then((val) {
          _loading = false;
          Navigator.pushNamed(context, 'change-password');
        }).catchError((onError) {
          setState(() {
            _email.clear();
            _errorText = "Se ha producido un error. Inténtalo de nuevo.";
            _error = true;
            _loading = false;
          });
        });
      }
    );
  }

  loginText() => FlatButton(
    child: Text(
      "Iniciar sesión", 
      style: Theme.of(context).textTheme.display1
    ),
    onPressed: () {
      Navigator.pop(context);
    },
  );

  errorText() {
    return _error ? Text(_errorText, style: Theme.of(context).textTheme.display3) : SizedBox(height: 0);
  }
}