"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.ForgotPassword = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _react = _interopRequireWildcard(require("react"));

var _reactHookForm = require("react-hook-form");

var _lib = require("@sentecacommerce-theme/lib");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Styled = require("../Styled");

var _ = require("../../../..");

var _templateObject, _templateObject2, _templateObject3;

var ForgotPassword = function ForgotPassword(_ref) {
  var goBack = _ref.goBack;

  var _useState = (0, _react.useState)(''),
      serverError = _useState[0];

  var _useState2 = (0, _react.useState)(false),
      showSuccess = _useState2[0],
      setShowSuccess = _useState2[1];

  var _useState3 = (0, _react.useState)(''),
      email = _useState3[0],
      setEmail = _useState3[1];

  var _useGlobalLabels = (0, _lib.useGlobalLabels)(),
      buttons = _useGlobalLabels.buttons,
      forms = _useGlobalLabels.forms,
      forgotPassword = _useGlobalLabels.forgotPassword;

  var onSuccess = function onSuccess() {
    setShowSuccess(true);
  };

  var _authApi$useRequestRe = _lib.authApi.useRequestResetPasswordToken({
    onSuccess: onSuccess
  }),
      mutate = _authApi$useRequestRe[0],
      _authApi$useRequestRe2 = _authApi$useRequestRe[1],
      isLoading = _authApi$useRequestRe2.isLoading,
      data = _authApi$useRequestRe2.data; // TODO: remove after email is sent


  (0, _react.useEffect)(function () {
    if (data) {
      setTimeout(function () {
        window.location.href = "/resetpassword?token=" + data.value;
      }, 1000);
    }
  }, [data]);

  var onSubmit = /*#__PURE__*/function () {
    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(_ref2) {
      var email;
      return _regenerator["default"].wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              email = _ref2.email;
              setEmail(email);
              mutate({
                email: email
              });

            case 3:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function onSubmit(_x) {
      return _ref3.apply(this, arguments);
    };
  }();

  var _useForm = (0, _reactHookForm.useForm)({
    defaultValues: {
      email: ''
    },
    mode: 'onSubmit',
    reValidateMode: 'onChange'
  }),
      handleSubmit = _useForm.handleSubmit,
      errors = _useForm.errors,
      control = _useForm.control;

  var hasErrors = !Object.keys(errors).length;

  if (showSuccess) {
    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Title, null, forgotPassword.title), /*#__PURE__*/_react["default"].createElement(Text, null, forgotPassword.receiveLinkMsg), /*#__PURE__*/_react["default"].createElement(EmailContainer, null, email), /*#__PURE__*/_react["default"].createElement(_Styled.CTA, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
      fullWidth: true,
      variant: "primary",
      onClick: goBack
    }, forgotPassword.backToLogin)));
  }

  return /*#__PURE__*/_react["default"].createElement("form", {
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/_react["default"].createElement(Title, null, forgotPassword.title), /*#__PURE__*/_react["default"].createElement(Text, null, forgotPassword.enterEmailMsg), /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    placeholder: "Email address",
    control: control,
    name: "email",
    rules: {
      required: forms.requiredField,
      pattern: {
        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
        message: forms.invalidEmail
      }
    },
    as: /*#__PURE__*/_react["default"].createElement(_.Input, {
      id: "login-email"
    })
  }), /*#__PURE__*/_react["default"].createElement(_.FormError, {
    errors: errors,
    fieldName: "email"
  }), /*#__PURE__*/_react["default"].createElement(_Styled.CTA, {
    className: "mt-4"
  }, /*#__PURE__*/_react["default"].createElement(_.Button, {
    iconPosition: "right",
    fullWidth: true,
    variant: hasErrors ? 'primary' : 'disabled',
    disabled: isLoading
  }, buttons.reset)), serverError && /*#__PURE__*/_react["default"].createElement(_.FormError, {
    center: true,
    text: serverError
  }), /*#__PURE__*/_react["default"].createElement(_Styled.FooterContainer, null, forgotPassword.orReturn, " ", /*#__PURE__*/_react["default"].createElement(_Styled.UnderlineCTA, {
    onClick: goBack
  }, forgotPassword.logIn), "."));
};

exports.ForgotPassword = ForgotPassword;
var Title = (0, _styledComponents["default"])(_.Typography).attrs({
  as: 'h6',
  variant: '4'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: 600;\n  text-align: center;\n"])));
var Text = (0, _styledComponents["default"])(_.Typography).attrs({
  as: 'h6',
  variant: '6',
  color: 'hint',
  className: 'my-3 mx-auto'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-align: center;\n  line-height: 1.4;\n\n  max-width: 26rem;\n"])));

var EmailContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-align: center;\n  font-weight: 500;\n"])));
//# sourceMappingURL=index.js.map