import React from 'react';
import cx from 'classnames';
import { useFormContext } from 'react-hook-form';

var Input = function Input(_ref) {
  var name = _ref.name,
      placeholder = _ref.placeholder,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? 'text' : _ref$type,
      _ref$required = _ref.required,
      required = _ref$required === void 0 ? false : _ref$required;

  var _useFormContext = useFormContext(),
      register = _useFormContext.register,
      clearError = _useFormContext.clearError,
      errors = _useFormContext.errors;

  var options = required ? {
    required: "Can't be blank"
  } : {};
  var classes = cx('field', errors[name] ? 'error' : '');
  return /*#__PURE__*/React.createElement("div", {
    className: classes
  }, /*#__PURE__*/React.createElement("input", {
    type: type,
    name: name,
    placeholder: placeholder,
    onFocus: function onFocus() {
      return clearError();
    },
    "aria-invalid": errors[name] ? 'true' : 'false',
    ref: register(options)
  }));
};

Input.displayName = 'Input';
var InputDoc;

if (process.env.NODE_ENV !== 'production') {
  // eslint-disable-next-line global-require
  InputDoc = require('./doc').doc(Input);
}

var InputWrapper = InputDoc || Input;
export { InputWrapper as Input };