"use strict";

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

exports.__esModule = true;
exports.LoginForm = 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 = _interopRequireDefault(require("react"));

var _link = _interopRequireDefault(require("next/link"));

var _router = _interopRequireDefault(require("next/router"));

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

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

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

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

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var LoginForm = function LoginForm() {
  var _useGlobalLabels = (0, _lib.useGlobalLabels)(),
      forms = _useGlobalLabels.forms,
      commonMessages = _useGlobalLabels.commonMessages,
      buttons = _useGlobalLabels.buttons,
      errorMessages = _useGlobalLabels.errorMessages,
      forgotPassword = _useGlobalLabels.forgotPassword;

  var _useReleva = (0, _lib.useReleva)(),
      changeBasket = _useReleva.changeBasket;

  var _useLogin = (0, _lib.useLogin)({
    onSuccess: function onSuccess() {
      changeBasket();

      _router["default"].push('/');
    }
  }),
      mutate = _useLogin[0],
      _useLogin$ = _useLogin[1],
      isLoading = _useLogin$.isLoading,
      error = _useLogin$.error;
  /* eslint-disable */


  var apiErrors = (0, _lib.useErrors)(error, {
    invalid_client: errorMessages == null ? void 0 : errorMessages.somethingWentWrong,
    invalid_credentials: errorMessages.invalidCredentials,
    "default": errorMessages == null ? void 0 : errorMessages.somethingWentWrong
  });
  /* eslint-enable*/

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

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

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

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

  return /*#__PURE__*/_react["default"].createElement("form", {
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/_react["default"].createElement(FormWrap, null, /*#__PURE__*/_react["default"].createElement(_.InputLabel, null, commonMessages.emailAddress, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    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(_.InputLabel, null, commonMessages.password, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: control,
    name: "password",
    rules: {
      required: forms.requiredField
    },
    as: /*#__PURE__*/_react["default"].createElement(_.Input, {
      id: "login-pass",
      type: "password"
    })
  }), /*#__PURE__*/_react["default"].createElement(_.FormError, {
    errors: errors,
    fieldName: "password"
  })), /*#__PURE__*/_react["default"].createElement(ErrorWrapper, null, /*#__PURE__*/_react["default"].createElement(_.FormError, {
    errors: apiErrors,
    fieldName: "invalid_client"
  }), /*#__PURE__*/_react["default"].createElement(_.FormError, {
    errors: apiErrors,
    fieldName: "invalid_credentials"
  }), /*#__PURE__*/_react["default"].createElement(_.FormError, {
    errors: apiErrors,
    fieldName: "default"
  })), /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: "/forgotpassword"
  }, /*#__PURE__*/_react["default"].createElement(ForgotPassword, null, forgotPassword.forgotYourPass))), /*#__PURE__*/_react["default"].createElement(ButtonWrap, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
    iconPosition: "right",
    disabled: isLoading,
    fullWidth: true,
    icon: /*#__PURE__*/_react["default"].createElement(_.LockIcon, null)
  }, buttons.login)));
};

exports.LoginForm = LoginForm;

var FormWrap = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-height: 32rem;\n"])));

var ForgotPassword = (0, _styledComponents["default"])(_2.Typography).attrs({
  as: 'p',
  variant: 7
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-decoration: underline;\n  color: ", ";\n  cursor: pointer;\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.primary;
});

var ErrorWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-height: 3.5rem;\n\n  div {\n    margin-top: none;\n  }\n"])));

var ButtonWrap = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-center justify-content-lg-end'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  padding-top: 1rem;\n\n  button {\n    max-width: 27.3rem;\n  }\n"])));
//# sourceMappingURL=index.js.map