import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import '../../models/user.dart';
import '../../utils/http_util.dart';
import '../../utils/utils.dart';
import '../../constants.dart';
import '../../generated/l10n.dart';
import '../../routes.dart';
import '../../store/actions.dart';
import '../../store/store.dart';

class MobileLogin extends StatefulWidget {
  final Key key;

  const MobileLogin({this.key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return MobileLoginState();
  }
}

class MobileLoginState extends State<MobileLogin> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  final usernameController = TextEditingController();
  final passwordController = TextEditingController();
  bool passwordVisible;

  bool onSubmitting;

  @override
  void initState() {
    super.initState();
    passwordVisible = true;
    onSubmitting = false;
  }

  @override
  Widget build(BuildContext context) {
    store.dispatch(UpdateContext(context));

    if (onSubmitting) {
      return Container(
        padding: EdgeInsets.all(50.0),
        child: Center(
          child: SpinKitThreeBounce(
            color: Colors.lightBlueAccent,
            size: 40.0,
          ),
        ),
      );
    }

    Widget view = Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          padding: EdgeInsets.only(left: 16.0, top: 16.0, right: 16.0),
          child: Text(
            S.of(context).please_login,
            style: TextStyle(
                fontSize: 24.0,
                color: Colors.black
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.only(top: 8.0, left: 16.0, right: 16.0),
          child: Text(
            S.of(context).login_instruction,
            style: TextStyle(
              color: Colors.black54,
              fontSize: 14.0,
            ),
          ),
        ),
        Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              Container(
                padding: EdgeInsets.only(top: 16.0, left: 16.0, right: 16.0, bottom: 0.0),
                child: TextFormField(
                  controller: usernameController,
                  keyboardType: TextInputType.emailAddress,
                  decoration: new InputDecoration(
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.black12,
                      ),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.blue,
                      ),
                    ),
                    labelText: S.of(context).mobile_email_username,
                  ),
                  style: TextStyle(
                      fontSize: 18.0
                  ),
                  autofocus: true,
                  validator: (String value) {
                    if (value.trim().isEmpty) {
                      return S.of(context).this_field_is_required;
                    }
                    return null;
                  },
                ),
              ),
              Container(
                padding: EdgeInsets.only(top: 0.0, left: 16.0, right: 16.0, bottom: 5.0),
                child: TextFormField(
                  controller: passwordController,
                  decoration: new InputDecoration(
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.black12,
                      ),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.blue,
                      ),
                    ),
                    labelText: S.of(context).password,
                    suffixIcon: IconButton(
                      icon: Icon(
                        passwordVisible ? Icons.visibility_off : Icons.visibility,
                        color: Theme.of(context).primaryColorDark,
                      ),
                      onPressed: () {
                        setState(() {
                          passwordVisible = !passwordVisible;
                        });
                      },
                    ),
                  ),
                  style: TextStyle(
                      fontSize: 18.0
                  ),
                  obscureText: passwordVisible,
                  validator: (String value) {
                    if (value.trim().isEmpty) {
                      return S.of(context).password_is_required;
                    }
                    return null;
                  },
                ),
              ),
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              FlatButton(
                child: Text(
                  S.of(context).new_user_question,
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
                onPressed: () {
                  newUser();
                },
              ),
              Expanded(
                child: Text(''),
              ),
              Container(
                child: FlatButton(
                  child: Text(
                    S.of(context).forgot_password_question,
                    style: TextStyle(
                      fontSize: 14.0,
                    ),
                  ),
                  onPressed: () {
                    forgotPassword();
                  },
                ),
              ),
            ],
          ),
        ),
        Align(
          alignment: Alignment.centerRight,
          child: Container(
            padding: EdgeInsets.only(top: 20.0, left: 16.0, right: 16.0, bottom: 20.0),
            child: RaisedButton(
              color: Theme.of(context).primaryColor,
              child: Text(
                S.of(context).login,
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              onPressed: () {
                signIn();
              },
            ),
          ),
        ),
      ],
    );
    return SingleChildScrollView(
      child: view,
    );
  }

  void newUser() {
    Routes.router.navigateTo(context, '/new-user');
  }

  void forgotPassword() {
    Routes.router.navigateTo(context, '/forgot-password');
  }

  void signIn() {
    final FormState form = _formKey.currentState;
    if (form.validate()) {
      if (mounted) {
        setState(() {
          onSubmitting = true;
        });
      }

      HttpUtil.httpPost(
        'v1/oauth-wisetronic/access_token', (response) {
          print('response $response');
        User user = User.fromJson(response.data['user']);
        store.dispatch(UpdateCurrentUser(user));
        Utils.getBox().then((box) {
          box.put(Constants.KEY_USER_ID, response.data['user_id']);
          box.put(Constants.KEY_ACCESS_TOKEN, response.data['access_token']);
          if (store.state.redirectRoute != null) {
            Routes.router.navigateTo(context, store.state.redirectRoute, replace: true);
            store.dispatch(UpdateRedirectRoute(null));
          } else {
            Routes.router.navigateTo(
                context, '/me', replace: true, clearStack: false);
          }
        }).catchError((error) {
          Utils.showMessageDialog(context, error);
        });
      },
        queryParameters: {
          'client_id': '${Utils.getPlatformName()}',
          'grant_type': 'password'
        },
        body: {
          'username': usernameController.text.trim(),
          'password': passwordController.text.trim(),
          'fcm_token': store.state.fcmToken != null ? store.state.fcmToken : ''
        },
        isFormData: true,
        businessId: Constants.BUSINESS_ID,
      ).catchError((error) {
        if (mounted) {
          setState(() {
            onSubmitting = false;
          });
        }
        Utils.showMessageDialog(context, error);
      });
    }
  }
}