"use strict";

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

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

exports.__esModule = true;
exports.ResetPassword = 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 _styledComponents = _interopRequireDefault(require("styled-components"));

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

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

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

var _Common = require("../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

var ResetPassword = function ResetPassword(_ref) {
  var labels = _ref.labels;
  var router = (0, _router.useRouter)();

  var _useResetPassword = (0, _lib.useResetPassword)({
    onSuccess: function onSuccess() {
      return router.push('/');
    }
  }),
      mutate = _useResetPassword[0],
      isLoading = _useResetPassword[1].isLoading;

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

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

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

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

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

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

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

  return /*#__PURE__*/_react["default"].createElement(Container, {
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/_react["default"].createElement(Center, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.IconDistrictLogo, null)), /*#__PURE__*/_react["default"].createElement(Title, null, labels.title), /*#__PURE__*/_react["default"].createElement(LabelCon, null, /*#__PURE__*/_react["default"].createElement(_Common.InputLabel, null, labels.enterNewPass))), /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: control,
    name: "password",
    rules: {
      required: forms.requiredField
    },
    as: /*#__PURE__*/_react["default"].createElement(_Common.Input, {
      placeholder: "Password",
      id: "new-pass",
      type: "password"
    })
  }), /*#__PURE__*/_react["default"].createElement(_Common.FormError, {
    errors: errors,
    fieldName: "password"
  }), serverError && /*#__PURE__*/_react["default"].createElement(_Common.FormError, {
    center: true,
    text: serverError
  }), /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    fullWidth: true,
    variant: hasErrors ? 'primary' : 'disabled',
    disabled: isLoading
  }, labels.updatePassword)));
};

exports.ResetPassword = ResetPassword;

var Title = _styledComponents["default"].h3.attrs({
  className: 'mb-2'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Container = _styledComponents["default"].form.attrs({
  className: 'container-fluid mt-5 mx-auto'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 450px;\n  min-height: calc(100vh - 300px);\n"])));

var LabelCon = _styledComponents["default"].div.attrs({
  className: 'mb-4'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.light;
});

var ButtonContainer = _styledComponents["default"].div.attrs({
  className: 'mt-5'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & [data-btn] {\n    font-size: 14px !important;\n    padding: 0 !important;\n    min-height: 4.4rem !important;\n  }\n"])));

var Center = _styledComponents["default"].div.attrs({})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  & svg {\n    height: 2.4rem;\n  }\n"])));

var LogoContainer = _styledComponents["default"].div.attrs({
  className: 'mb-2'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=resetPassword.component.js.map