"use strict";

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

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

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

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

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

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

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

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

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

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

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

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

var _profile = require("../../profile.context");

var _NavigationSkeleton = require("../NavigationSkeleton");

var _Components = require("./Components");

var _templateObject, _templateObject2;

var AccountSettings = function AccountSettings() {
  var _userData$email, _userData$phoneNumber;

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

  var dispatch = (0, _profile.useProfileDispatch)();

  var _useState = (0, _react.useState)(false),
      phoneModalStatus = _useState[0],
      setPhoneModalStatus = _useState[1];

  var _useState2 = (0, _react.useState)(false),
      passwordModalStatus = _useState2[0],
      setPasswordModalStatus = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      emailModalStatus = _useState3[0],
      setEmailModalStatus = _useState3[1];

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

  var _useUser = (0, _lib.useUser)(),
      userData = _useUser.data;

  var _useUpdateProfile = (0, _lib.useUpdateProfile)({
    onSuccess: function onSuccess() {}
  }),
      mutate = _useUpdateProfile[0],
      isLoading = _useUpdateProfile[1].isLoading; // TODO: make typezation


  var onSubmit = /*#__PURE__*/function () {
    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(data) {
      var dateOfBirth;
      return _regenerator["default"].wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (userData) {
                _context.next = 2;
                break;
              }

              return _context.abrupt("return");

            case 2:
              dateOfBirth = data.dateOfBirth.split('-');
              changeProfileData();
              mutate({
                email: userData.email,
                firstName: data.firstName,
                lastName: data.lastName,
                gender: data.gender,
                dayOfBirth: +dateOfBirth[2],
                monthOfBirth: +dateOfBirth[1],
                yearOfBirth: +dateOfBirth[0],
                _id: userData._id,
                status: userData.status
              });

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

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

  var pad = function pad(_int) {
    return (_int == null ? void 0 : _int.toString().padStart(2, '0')) || '';
  };

  var dateOfBirth = pad(userData == null ? void 0 : userData.yearOfBirth) + "-" + pad(userData == null ? void 0 : userData.monthOfBirth) + "-" + pad(userData == null ? void 0 : userData.dayOfBirth);

  var getGender = function getGender() {
    var gender = '';
    if ((userData == null ? void 0 : userData.gender) === 0) gender = 0;
    if ((userData == null ? void 0 : userData.gender) === 1) gender = 1;
    return gender;
  };

  var _useForm = (0, _reactHookForm.useForm)({
    defaultValues: (0, _extends2["default"])({}, userData, {
      dateOfBirth: dateOfBirth,
      firstName: (userData == null ? void 0 : userData.firstName) || '',
      lastName: (userData == null ? void 0 : userData.lastName) || '',
      gender: getGender()
    }),
    mode: 'onChange',
    reValidateMode: 'onChange'
  }),
      handleSubmit = _useForm.handleSubmit,
      errors = _useForm.errors,
      control = _useForm.control;

  var hasErrors = !!Object.keys(errors).length;
  var buttonDisabled = isLoading || hasErrors;
  return /*#__PURE__*/_react["default"].createElement(_NavigationSkeleton.NavigationSkeleton, {
    url: "personal-info",
    header: "Personal Info"
  }, phoneModalStatus && /*#__PURE__*/_react["default"].createElement(_Components.VerifyPhoneModal, {
    handleClose: function handleClose() {
      return setPhoneModalStatus(false);
    }
  }), passwordModalStatus && /*#__PURE__*/_react["default"].createElement(_Components.UpdatePasswordModal, {
    handleClose: function handleClose() {
      return setPasswordModalStatus(false);
    }
  }), emailModalStatus && /*#__PURE__*/_react["default"].createElement(_Components.VerifyEmailModal, {
    handleClose: function handleClose() {
      return setEmailModalStatus(false);
    }
  }), /*#__PURE__*/_react["default"].createElement("form", {
    noValidate: true,
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: control,
    name: "firstName",
    rules: {
      required: forms.requiredField
    },
    as: /*#__PURE__*/_react["default"].createElement(_Components.TextInput, {
      label: forms.firstName,
      isRequired: true,
      id: "profile-first-name",
      errors: errors,
      name: "firstName"
    })
  }), /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: control,
    name: "lastName",
    rules: {
      required: forms.requiredField
    },
    as: /*#__PURE__*/_react["default"].createElement(_Components.TextInput, {
      label: forms.lastName,
      isRequired: true,
      id: "profile-last-name",
      errors: errors,
      name: "lastName"
    })
  }), /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: control,
    name: "dateOfBirth",
    rules: {
      required: forms.requiredField
    },
    as: /*#__PURE__*/_react["default"].createElement(_Components.TextInput, {
      label: forms.dateOfBirth,
      isRequired: true,
      type: "date",
      id: "profile-date-of-birth",
      errors: errors,
      name: "dateOfBirth"
    })
  }), /*#__PURE__*/_react["default"].createElement(_Components.PopupInput, {
    header: 'Email',
    label: (_userData$email = userData == null ? void 0 : userData.email) != null ? _userData$email : 'Email',
    handleClick: function handleClick() {
      return setEmailModalStatus(true);
    }
  }), /*#__PURE__*/_react["default"].createElement(_Components.PopupInput, {
    header: 'Password',
    label: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
    handleClick: function handleClick() {
      return setPasswordModalStatus(true);
    }
  }), /*#__PURE__*/_react["default"].createElement(_Components.PopupInput, {
    header: 'Mobile',
    label: (_userData$phoneNumber = userData == null ? void 0 : userData.phoneNumber) != null ? _userData$phoneNumber : 'Not set',
    handleClick: function handleClick() {
      return setPhoneModalStatus(!phoneModalStatus);
    }
  }), /*#__PURE__*/_react["default"].createElement(RadioInputContainer, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: control,
    name: "gender",
    rules: {
      required: forms.requiredField
    },
    render: function render(_ref2) {
      var onChange = _ref2.onChange,
          value = _ref2.value,
          name = _ref2.name;
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Components.RadioInput, {
        label: forms.male,
        name: name,
        value: 0,
        isChecked: value === 0,
        onChange: onChange
      }), /*#__PURE__*/_react["default"].createElement(_Components.RadioInput, {
        label: forms.female,
        name: name,
        value: 1,
        isChecked: value === 1,
        onChange: onChange
      }));
    }
  })), /*#__PURE__*/_react["default"].createElement(SubmitWrapper, null, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    variant: "light",
    bordered: true,
    onClick: function onClick() {
      return dispatch({
        type: 'reset'
      });
    }
  }, buttons.reset), /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    disabled: buttonDisabled,
    className: "ml-4",
    variant: buttonDisabled ? 'disabled' : 'primary'
  }, buttons.save))));
};

exports.AccountSettings = AccountSettings;

var RadioInputContainer = _styledComponents["default"].div.attrs({
  className: 'pt-2 mt-1'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));

var SubmitWrapper = _styledComponents["default"].div.attrs({
  className: 'my-4'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  justify-content: flex-end;\n"])));
//# sourceMappingURL=index.js.map