"use strict";

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

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

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

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

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

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

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

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var VerifyPhoneModal = function VerifyPhoneModal(_ref) {
  var _data$phoneNumber;

  var handleClose = _ref.handleClose;

  var _profileApi$useUpdate = _lib.profileApi.useUpdate({
    onSuccess: handleClose
  }),
      mutate = _profileApi$useUpdate[0];

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

  var _usersApi$useGet = _lib.usersApi.useGet(),
      data = _usersApi$useGet.data,
      isLoading = _usersApi$useGet.isLoading;

  var onSubmit = function onSubmit(_ref2) {
    var _data$_id, _data$email;

    var phoneNumber = _ref2.phoneNumber;
    mutate({
      phoneNumber: phoneNumber,
      _id: (_data$_id = data == null ? void 0 : data._id) != null ? _data$_id : '',
      email: (_data$email = data == null ? void 0 : data.email) != null ? _data$email : 'string'
    });
  };

  var _useForm = (0, _reactHookForm.useForm)({
    defaultValues: {
      phoneNumber: (_data$phoneNumber = data == null ? void 0 : data.phoneNumber) != null ? _data$phoneNumber : ''
    },
    mode: 'onChange',
    reValidateMode: 'onChange'
  }),
      handleSubmit = _useForm.handleSubmit,
      errors = _useForm.errors,
      control = _useForm.control;

  var Inputs = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: control,
    name: "phoneNumber",
    rules: {
      required: forms.requiredField,
      pattern: {
        value: /([0-9]{9})$/i,
        // TODO make better regex
        message: forms.invalidPhone
      }
    },
    as: /*#__PURE__*/_react["default"].createElement(_Common.TextInput, {
      label: forms.addPhone,
      id: "update-phone-field",
      errors: errors,
      name: "phone"
    })
  })), /*#__PURE__*/_react["default"].createElement(ErrorContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.FormError, {
    errors: errors,
    fieldName: "phoneNumber"
  })));

  return /*#__PURE__*/_react["default"].createElement(_Common.ModalForm, {
    handleClose: handleClose,
    title: forms.addPhone,
    subtitle: forms.phoneSecurity,
    onSubmit: handleSubmit(onSubmit),
    Inputs: Inputs,
    disableSubmit: isLoading
  });
};

exports.VerifyPhoneModal = VerifyPhoneModal;

var InputWrapper = _styledComponents["default"].div.attrs({
  className: 'mt-1 mb-2 pb-1'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));

var Input = _styledComponents["default"].input.attrs({
  className: 'pl-2'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 40px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 3px;\n  color: ", ";\n  width: 100%;\n  outline: none;\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.secondary;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.disabled;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.primary;
});

var ErrorContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-top: -1.4rem;\n"])));

var VerifyButtonContainer = _styledComponents["default"].div.attrs({
  className: 'ml-3'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & > button {\n    min-width: 120px;\n    height: 100%;\n    padding: 0.8rem 1rem;\n  }\n"])));
//# sourceMappingURL=index.js.map