import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:megaflix/auth.dart';
import 'package:megaflix/data/database.dart';
import 'package:megaflix/models/user.dart';
import 'package:megaflix/screens/loginPresenter.dart';

class LoginScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new LoginScreenState();
  }
}

class LoginScreenState extends State<LoginScreen>
    implements LoginScreenContract, AuthStateListener {
  BuildContext _ctx;

  bool _isLoading = false;
  final formKey = new GlobalKey<FormState>();
  final scaffoldKey = new GlobalKey<ScaffoldState>();
  String _password, _username;

  LoginScreenPresenter _presenter;

  LoginScreenState() {
    _presenter = new LoginScreenPresenter(this);
    var authStateProvider = new AuthStateProvider();
    authStateProvider.subscribe(this);
  }

  void _submit() {
    final form = formKey.currentState;

    if (form.validate()) {
      setState(() => _isLoading = true);
      form.save();
      _presenter.doLogin(_username, _password);
    }
  }

  void _showSnackBar(String text) {
    scaffoldKey.currentState
        .showSnackBar(new SnackBar(content: new Text(text)));
  }

  @override
  onAuthStateChanged(AuthState state) {

    if(state == AuthState.LOGGED_IN)
      Navigator.of(_ctx).pushReplacementNamed("/home");
  }

  @override
  Widget build(BuildContext context) {
    _ctx = context;
    var loginBtn = Container(width: 300,child: Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Container(

          margin: EdgeInsets.only(right: 10, top: 25),
          child: OutlineButton(
            onPressed: (){},
            color: Colors.white,
            textColor: Colors.pink,
            child: Text("CANCEL"),),
        ),
        Container(
          child: MaterialButton(
            onPressed: _submit,
            color: Colors.pink,
            textColor: Colors.white,
            child: Text("LOGIN"),),
        )
      ],
    ));
    var loginForm = new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new Form(
          key: formKey,
            child: Center(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      width: 250,
                      height: 250,
                      margin: EdgeInsets.only(bottom: 0, top: 0),
                      child: new Image.asset("images/logo.png"),
                    ),

                    Container(
                        width: 300,
                        padding: EdgeInsets.all(4),
                        child: new TextFormField(
                          decoration: InputDecoration(
                              border: OutlineInputBorder(),
                              labelText: 'Enter your username'
                          ),
                          onSaved: (value) => _username = value,
                        )
                    ),
                    Container(
                        width: 300,
                        padding: EdgeInsets.all(4),
                        child: new TextFormField(
                            decoration: InputDecoration(
                                border: OutlineInputBorder(),
                                labelText: 'Enter your password'
                            ),
                            onSaved: (value) => _password = value
                        )
                    ),
                    /*Container(
                        width: 300,
                        padding: EdgeInsets.all(4),
                        child: new TextFormField(
                            decoration: InputDecoration(
                                border: OutlineInputBorder(),
                                labelText: 'Enter your host'
                            ),
                            onSaved: (value) => _host = value
                        )
                    ),*/
                    /*Container(
                        width: 300,
                        padding: EdgeInsets.all(4),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            Container(

                              margin: EdgeInsets.only(right: 10, top: 25),
                              child: OutlineButton(
                                onPressed: (){},
                                color: Colors.white,
                                textColor: Colors.pink,
                                child: Text("CANCEL"),),
                            ),
                            Container(
                              child: MaterialButton(
                                onPressed: _submit,
                                color: Colors.pink,
                                textColor: Colors.white,
                                child: Text("LOGIN"),),
                            )
                          ],))*/
                  ],
                ),
              ),
            )
        ),
        _isLoading ? new CircularProgressIndicator() : loginBtn
      ],
      crossAxisAlignment: CrossAxisAlignment.center,
    );

    return new Scaffold(
      appBar: null,
      key: scaffoldKey,
      body: new Center(child: loginForm)
    );
  }

  @override
  void onLoginError(String errorTxt) {
    _showSnackBar(errorTxt);
    setState(() => _isLoading = false);
  }

  @override
  void onLoginSuccess(User user) async {
    _showSnackBar(user.toString());
    setState(() => _isLoading = false);
    var db = new DatabaseHelper();
    await db.saveUser(user);
    var authStateProvider = new AuthStateProvider();
    authStateProvider.notify(AuthState.LOGGED_IN);
  }
}