import 'package:countdown/countdown.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_wisetronic/widgets/general/breadcrumbs.dart';
import 'package:fluttertoast/fluttertoast.dart';

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

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

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

}

class DesktopForgotPasswordState extends State<DesktopForgotPassword> {
  final GlobalKey<FormState> _formKey = GlobalKey();

  final usernameController = TextEditingController();
  bool usernameEnable = true;
  final codeController = TextEditingController();

  bool enableGetCode;
  String getCodeText;
  bool canRegister;

  var countDownListener;

  double sideSpace = 0;
  double mainSpace = 1200;

  @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;
    }

    Widget view = Column(
      children: <Widget>[
        Form(
          key: _formKey,
          child: Container(
            padding: EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(top: 0.0),
                  child: TextFormField(
                    controller: usernameController,
                    enabled: usernameEnable,
                    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_or_email,
                    ),
                    style: TextStyle(
                        fontSize: 18.0
                    ),
                    autofocus: true,
                    validator: (String value) {
                      if (value.trim().isEmpty) {
                        return S.of(context).mobile_or_email_is_required;
                      }
                      return null;
                    },
                    onChanged: (string) {
                      if (string.isEmpty) {
                        if (mounted) {
                          setState(() {
                            canRegister = false;
                          });
                        }
                      } else if (string.isNotEmpty && codeController.text.trim().isNotEmpty) {
                        if (mounted) {
                          setState(() {
                            canRegister = true;
                          });
                        }
                      }
                      if (string.isNotEmpty && !enableGetCode) {
                        if (mounted) {
                          setState(() {
                            enableGetCode = true;
                          });
                        }
                      } else if (string.isEmpty && enableGetCode) {
                        if (mounted) {
                          setState(() {
                            enableGetCode = false;
                          });
                        }
                      }
                    },
                  ),
                ),
                Container(
                  child: TextFormField(
                    controller: codeController,
                    keyboardType: TextInputType.number,
                    decoration: new InputDecoration(
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(
                          color: Colors.black12,
                        ),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(
                          color: Colors.blue,
                        ),
                      ),
                      labelText: S.of(context).verification_code,
                      suffixIcon: MouseRegion(
                        cursor: SystemMouseCursors.click,
                        child: GestureDetector(
                          child: Container(
                            margin: EdgeInsets.only(top: 6.0),
                            child: Container(
                              padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
                              decoration: BoxDecoration(
                                shape: BoxShape.rectangle,
                                border:  new Border.all(
                                  color: enableGetCode ? Colors.black87 : Colors.black26,
                                  width: 1.0,
                                ),
                                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                              ),
                              child: Text(
                                getCodeText,
                                style: TextStyle(
                                    color: enableGetCode ? Colors.black87 : Colors.black26,
                                    fontSize: 12.0
                                ),
                              ),
                            ),
                          ),
                          onTap: enableGetCode ? getCodeTapped : null,
                        ),
                      ),
                    ),
                    style: TextStyle(
                        fontSize: 18.0
                    ),
                    validator: (String value) {
                      if (value.trim().isEmpty) {
                        return S.of(context).verification_code_is_required;
                      }
                      return null;
                    },
                    onChanged: (string) {
                      if (usernameController.text.trim().isNotEmpty && string.isNotEmpty) {
                        if (mounted) {
                          setState(() {
                            canRegister = true;
                          });
                        }
                      } else {
                        if (mounted) {
                          setState(() {
                            canRegister = false;
                          });
                        }
                      }
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.only(top: 0.0, right: 16.0),
          child: Align(
            alignment: Alignment.centerRight,
            child: RaisedButton(
              color: Theme.of(context).primaryColor,
              child: Text(
                S.of(context).verify,
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              onPressed: canRegister ? register : null,
            ),
          ),
        ),
      ],
    );
    return SingleChildScrollView(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        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(16.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        child: Text(
                          S.of(context).forgot_password,
                          style: TextStyle(
                              fontSize: 24.0,
                              color: Colors.black
                          ),
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.only(top: 8.0, bottom: 16.0),
                        child: Text(
                          S.of(context).forgot_password_description,
                          style: TextStyle(
                            color: Colors.black38,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                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: view,
                ),
              ],
            ),
          ),
          Container(
            width: sideSpace,
          ),
        ],
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    setState(() {
      enableGetCode = false;
      canRegister = false;
      usernameEnable = true;
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    getCodeText = S.of(context).get_code;
  }

  void register() {
    final FormState form = _formKey.currentState;
    if (form.validate()) {
      HttpUtil.httpPost('v1/users', (response) {
        Routes.router.navigateTo(context, '/reset-password/${usernameController.text.trim()}/${codeController.text.trim()}', replace: true);
      },
        queryParameters: {
          'action': 'forgot_password_verify_code'
        },
        isFormData: true,
        body: {
          'mobile': usernameController.text.trim(),
          'code': codeController.text.trim(),
        },
      ).catchError((error) {
        Utils.showMessageDialog(context, error);
      });
    }
  }

  void getCodeTapped() {
    if (usernameController.text.trim().isNotEmpty) {
      HttpUtil.httpPost('v1/users', (response) {
        Fluttertoast.showToast(
            msg: S.of(context).verification_code_sent,
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            backgroundColor: Colors.black54,
            textColor: Colors.white
        );
        if (mounted) {
          setState(() {
            usernameEnable = false;
          });
        }
        countDownListener = CountDown(Duration(seconds: 90)).stream.listen(null);
        startCountDown();
      },
        queryParameters: {'action': 'forgot_password'},
        body: {
          'mobile': usernameController.text.trim(),
        },
        isFormData: true,
      ).catchError((error) {
        if (mounted) {
          setState(() {
            canRegister = false;
          });
        }
        Utils.showMessageDialog(context, error);
      });
    } else {
      Fluttertoast.showToast(
          msg: S.of(context).enter_mobile_or_email,
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.CENTER,
          backgroundColor: Colors.red,
          textColor: Colors.white
      );
    }
  }

  void startCountDown() {
    countDownListener.onData((Duration d) {
      if (mounted) {
        setState(() {
          enableGetCode = false;
          getCodeText = S.of(context).get_code_token(d.inSeconds);
        });
      }
    });

    countDownListener.onDone(() {
      if (mounted) {
        setState(() {
          enableGetCode = true;
          getCodeText = S.of(context).get_code_again;
        });
      }
      countDownListener = CountDown(Duration(seconds: 90)).stream.listen(null);
    });
  }
}