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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import styled from 'styled-components';
import { profileApi, usersApi, useGlobalLabels } from '@sentecacommerce-theme/lib';
import { FormError, TextInput, ModalForm } from '../../../../../Common';
export var VerifyPhoneModal = (_ref) => {
  var _data$phoneNumber;

  var {
    handleClose
  } = _ref;
  var [mutate] = profileApi.useUpdate({
    onSuccess: handleClose
  });
  var {
    forms
  } = useGlobalLabels();
  var {
    data,
    isLoading
  } = usersApi.useGet();

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

    var {
      phoneNumber
    } = _ref2;
    mutate({
      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 {
    handleSubmit,
    errors,
    control
  } = useForm({
    defaultValues: {
      phoneNumber: (_data$phoneNumber = data == null ? void 0 : data.phoneNumber) != null ? _data$phoneNumber : ''
    },
    mode: 'onChange',
    reValidateMode: 'onChange'
  });
  var Inputs = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputWrapper, null, /*#__PURE__*/React.createElement(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.createElement(TextInput, {
      label: forms.addPhone,
      id: "update-phone-field",
      errors: errors,
      name: "phone"
    })
  })), /*#__PURE__*/React.createElement(ErrorContainer, null, /*#__PURE__*/React.createElement(FormError, {
    errors: errors,
    fieldName: "phoneNumber"
  })));
  return /*#__PURE__*/React.createElement(ModalForm, {
    handleClose: handleClose,
    title: forms.addPhone,
    subtitle: forms.phoneSecurity,
    onSubmit: handleSubmit(onSubmit),
    Inputs: Inputs,
    disableSubmit: isLoading
  });
};
var InputWrapper = styled.div.attrs({
  className: 'mt-1 mb-2 pb-1'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));
var Input = styled.input.attrs({
  className: 'pl-2'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 3px;\n  color: ", ";\n  width: 100%;\n  outline: none;\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.disabled;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.primary;
});
var ErrorContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  margin-top: -1.4rem;\n"])));
var VerifyButtonContainer = styled.div.attrs({
  className: 'ml-3'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  & > button {\n    min-width: 120px;\n    height: 100%;\n    padding: 0.8rem 1rem;\n  }\n"])));
//# sourceMappingURL=index.js.map