import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";

var _templateObject;

import React from 'react';
import { useForm, Controller, useWatch } from 'react-hook-form';
import { profileApi, useGlobalLabels } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { ModalForm } from '../../../../../Common/ModalForm';
import { TextInput } from '../../../../../Common/TextInput';
export var UpdatePasswordModal = (_ref) => {
  var {
    handleClose
  } = _ref;
  // TODO: error handling
  var {
    forms
  } = useGlobalLabels();
  var [mutate, {
    isLoading,
    isError
  }] = profileApi.useChangePassword({
    onSuccess: handleClose
  });

  var onSubmit = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator(function* (data) {
      mutate({
        currentPassword: data.currentPassword,
        newPassword: data.newPassword
      });
    });

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

  var {
    handleSubmit,
    errors,
    control
  } = useForm({
    defaultValues: {
      currentPassword: '',
      newPassword: '',
      newPasswordConfirm: ''
    },
    mode: 'onChange',
    reValidateMode: 'onChange'
  });
  var currentPassword = useWatch({
    control,
    name: 'currentPassword',
    defaultValue: ''
  });
  var newPassword = useWatch({
    control,
    name: 'newPassword',
    defaultValue: ''
  });

  var validatePasswordMatch = passwordConfirm => {
    return passwordConfirm === newPassword ? undefined : forms.passwordNotMatching;
  };

  var validateNewPassword = newPassword => {
    return newPassword === currentPassword ? forms.newDiffererntPassword : undefined;
  };

  var Inputs = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputWrapper, null, /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "currentPassword",
    rules: {
      required: forms.requiredField
    },
    as: /*#__PURE__*/React.createElement(TextInput, {
      label: forms.currentPassword,
      id: "update-password-current",
      type: "password",
      isRequired: true,
      errors: errors,
      name: "newPasswordConfirm"
    })
  }), /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "newPassword",
    rules: {
      required: forms.requiredField,
      minLength: {
        value: 8,
        message: forms.passwordLength
      },
      validate: validateNewPassword
    },
    as: /*#__PURE__*/React.createElement(TextInput, {
      label: forms.newDiffererntPassword,
      id: "update-password-new",
      type: "password",
      isRequired: true,
      errors: errors,
      name: "newPasswordConfirm"
    })
  }), /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "newPasswordConfirm",
    rules: {
      required: forms.requiredField,
      minLength: {
        value: 8,
        message: forms.passwordLength
      },
      validate: validatePasswordMatch
    },
    as: /*#__PURE__*/React.createElement(TextInput, {
      label: forms.passwordConfirm,
      id: "update-password-confirm",
      type: "password",
      isRequired: true,
      errors: errors,
      name: "newPasswordConfirm"
    })
  })));
  return /*#__PURE__*/React.createElement(ModalForm, {
    handleClose: handleClose,
    title: forms.editPassword,
    onSubmit: handleSubmit(onSubmit),
    Inputs: Inputs,
    error: isError ? forms.invalidPassword : undefined,
    disableSubmit: isLoading || isError
  });
};
var InputWrapper = styled.div.attrs({
  className: 'mt-1 mb-2 pb-1'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map