import 'package:flutter/material.dart';

import '../../generated/l10n.dart';
import '../../store/store.dart';
import '../../utils/http_util.dart';
import '../../utils/utils.dart';
import '../../widgets/general/breadcrumbs.dart';

class DesktopChangePassword extends StatefulWidget {
  const DesktopChangePassword({Key key}) : super(key: key);

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

}

class DesktopChangePasswordState extends State<DesktopChangePassword> {
  final GlobalKey<FormState> _formKey = GlobalKey();

  final oldPasswordController = TextEditingController();
  final passwordController = TextEditingController();
  final passwordAgainController = TextEditingController();

  bool passwordVisible;
  bool passwordAgainVisible;

  bool canReset;

  double sideSpace = 0;
  double mainSpace = 1200;

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

  @override
  Widget build(BuildContext 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;
    }

    Widget view = SingleChildScrollView(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: sideSpace,
          ),
          Container(
            width: mainSpace,
            padding: EdgeInsets.only(top: 16.0, bottom: 20.0),
            child: Container(
              width: mainSpace,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          child: Container(
                            padding: EdgeInsets.only(top: 16.0, left: 16.0, right: 16.0, bottom: 16.0),
                            child: Text(
                              S.of(context).change_password,
                              style: TextStyle(
                                  fontSize: 24.0,
                                  color: Colors.black
                              ),
                            ),
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.only(left: 20.0, right: 20.0),
                          child: Text(
                            S.of(context).change_password_desc,
                            style: TextStyle(
                              color: Colors.black38,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Column(
                      children: [
                        Container(
                          padding: EdgeInsets.only(top: 0.0, left: 16.0, right: 16.0, bottom: 0.0),
                          child: Form(
                            key: _formKey,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Container(
                                  child: TextFormField(
                                    controller: oldPasswordController,
                                    decoration: new InputDecoration(
                                      enabledBorder: UnderlineInputBorder(
                                        borderSide: BorderSide(
                                          color: Colors.black12,
                                        ),
                                      ),
                                      focusedBorder: UnderlineInputBorder(
                                        borderSide: BorderSide(
                                          color: Colors.blue,
                                        ),
                                      ),
                                      labelText: S.of(context).old_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
                                    ),
                                    validator: (String value) {
                                      if (value.trim().isEmpty) {
                                        return S.of(context).current_password_is_required;
                                      }
                                      return null;
                                    },
                                    obscureText: passwordVisible,
                                    onChanged: (string) {
                                      if (string.trim().isNotEmpty && passwordController.text.trim().isNotEmpty && passwordAgainController.text.trim().isNotEmpty) {
                                        if (mounted) {
                                          setState(() {
                                            canReset = true;
                                          });
                                        }
                                      } else {
                                        if (mounted) {
                                          setState(() {
                                            canReset = false;
                                          });
                                        }
                                      }
                                    },
                                  ),
                                ),
                                Container(
                                  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
                                    ),
                                    validator: (String value) {
                                      if (value.trim().isEmpty) {
                                        return S.of(context).password_is_required;
                                      }
                                      return null;
                                    },
                                    obscureText: passwordVisible,
                                    onChanged: (string) {
                                      if (string.trim().isNotEmpty && oldPasswordController.text.trim().isNotEmpty && passwordAgainController.text.trim().isNotEmpty) {
                                        if (mounted) {
                                          setState(() {
                                            canReset = true;
                                          });
                                        }
                                      } else {
                                        if (mounted) {
                                          setState(() {
                                            canReset = false;
                                          });
                                        }
                                      }
                                    },
                                  ),
                                ),
                                Container(
                                  child: TextFormField(
                                    controller: passwordAgainController,
                                    decoration: new InputDecoration(
                                      enabledBorder: UnderlineInputBorder(
                                        borderSide: BorderSide(
                                          color: Colors.black12,
                                        ),
                                      ),
                                      focusedBorder: UnderlineInputBorder(
                                        borderSide: BorderSide(
                                          color: Colors.blue,
                                        ),
                                      ),
                                      labelText: S.of(context).password_again,
                                      suffixIcon: IconButton(
                                        icon: Icon(
                                          passwordAgainVisible ? Icons.visibility_off : Icons.visibility,
                                          color: Theme.of(context).primaryColorDark,
                                        ),
                                        onPressed: () {
                                          setState(() {
                                            passwordAgainVisible = !passwordAgainVisible;
                                          });
                                        },
                                      ),
                                    ),
                                    style: TextStyle(
                                        fontSize: 18.0
                                    ),
                                    validator: (String value) {
                                      if (value.trim().isEmpty) {
                                        return S.of(context).password_is_required;
                                      }
                                      if (value.trim() != passwordController.text.trim()) {
                                        return S.of(context).password_is_not_match_password_again;
                                      }
                                      return null;
                                    },
                                    obscureText: passwordAgainVisible,
                                    onChanged: (string) {
                                      if (passwordController.text.trim().isNotEmpty && string.trim().isNotEmpty && oldPasswordController.text.trim().isNotEmpty) {
                                        if (mounted) {
                                          setState(() {
                                            canReset = true;
                                          });
                                        }
                                      } else {
                                        if (mounted) {
                                          setState(() {
                                            canReset = false;
                                          });
                                        }
                                      }
                                    },
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.only(right: 16.0, top: 16.0),
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                primary: Theme.of(context).primaryColor,
                              ),
                              child: Text(
                                S.of(context).submit,
                                style: TextStyle(
                                  color: Colors.white,
                                ),
                              ),
                              onPressed: canReset ? resetPassword : null,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Container(
            width: sideSpace,
          ),
        ],
      ),
    );
    return view;
  }

  void resetPassword() {
    final FormState form = _formKey.currentState;
    if (form.validate()) {
      HttpUtil.httpPost('v1/users', (response) {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Text(S.of(context).success),
              content: Text(S.of(context).password_has_been_changed),
              actions: <Widget>[
                TextButton(
                  child: Text(S.of(context).ok),
                  onPressed: () {
                    Navigator.of(context).pop();
                    Navigator.of(context).pop();
                  },
                ),
              ],
            );
          },
        );
      },
          queryParameters: {
            'action': 'change_password',
          },
          isFormData: true,
          body: {
            'id': store.state.user.id,
            'old_password': oldPasswordController.text.trim(),
            'password': passwordController.text.trim(),
          }
      ).catchError((error) {
        Utils.showMessageDialog(context, error);
      });
    }
  }
}