import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

import '../../constants.dart';
import '../../generated/l10n.dart';
import '../../models/user.dart';
import '../../routes.dart';
import '../../store/actions.dart';
import '../../store/store.dart';
import '../../utils/http_util.dart';
import '../../utils/utils.dart';

class DesktopLogin extends StatefulWidget {
  final Key key;

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

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

class DesktopLoginState extends State<DesktopLogin> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

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

  bool onSubmitting;

  double sideSpace = 0;
  double mainSpace = 1200;

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

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

    if (MediaQuery.of(context).size.width <= 1200) {
      mainSpace = MediaQuery.of(context).size.width;
      sideSpace = 0;
    } else {
      mainSpace = 1200;
      sideSpace = (MediaQuery.of(context).size.width - 1200) / 2;
    }

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

    Widget view = SingleChildScrollView(
      child: Row(
        children: [
          Container(
            width: sideSpace,
          ),
          Container(
            width: mainSpace,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: mainSpace / 2,
                  margin: EdgeInsets.only(top: 16.0, bottom: 16.0),
                  padding: EdgeInsets.all(10.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      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: 12.0, left: 16.0, right: 16.0, bottom: 12.0),
                        child: Text(
                          S.of(context).login_instruction,
                          style: TextStyle(
                            color: Colors.black54,
                            fontSize: 14.0,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  width: mainSpace / 2,
                  margin: EdgeInsets.only(top: 16.0, bottom: 16.0),
                  padding: EdgeInsets.all(10.0),
                  decoration: BoxDecoration(
                    border: Border(
                      left: BorderSide(
                        width: 1.0,
                        color: Colors.black12,
                      ),
                    ),
                  ),
                  child: Column(
                    children: <Widget>[
                      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>[
                            TextButton(
                              child: Text(
                                S.of(context).new_user_question,
                                style: TextStyle(
                                  fontSize: 14.0,
                                ),
                              ),
                              onPressed: () {
                                newUser();
                              },
                            ),
                            Expanded(
                              child: Text(''),
                            ),
                            Container(
                              child: TextButton(
                                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: ElevatedButton(
                            style: ElevatedButton.styleFrom(
                              primary: Theme.of(context).primaryColor,
                            ),
                            child: Text(
                              S.of(context).login,
                              style: TextStyle(
                                color: Colors.white,
                              ),
                            ),
                            onPressed: () {
                              signIn();
                            },
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            width: sideSpace,
          ),
        ],
      ),
    );
    return 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) {
          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);
      });
    }
  }
}