import React__default from 'react';
import Label from '../label/index.js';
import Input from '../input/index.js';
import Stack from '../stack/index.js';
import InlineValidation from '../inline-validation/index.js';
import { useField, useFormContext } from '../use-form/index.js';
import PropTypes from 'prop-types';
import '../extends-C4cduGrv.js';
import '../objectWithoutProperties-TXwlfNxG.js';
import '@reach/visually-hidden';
import 'classnames';
import '../defineProperty-CEd-kZQW.js';
import '../icon/index.js';
import '@fortawesome/react-fontawesome';
import '../icon/icons.js';
import '../icon/library.js';
import '@fortawesome/fontawesome-svg-core';
import '@fortawesome/pro-solid-svg-icons';
import '@fortawesome/pro-light-svg-icons';
import '@fortawesome/free-brands-svg-icons';
import '../slicedToArray-BB-AwwkK.js';
import '../index-qSfOyGhk.js';
import '../typeof-CgC7Bq6K.js';
import '../auto-id.esm-Cly76abB.js';
import '../utils.esm-CKyxlHOy.js';
import '../warning-s9zGJbnw.js';
import '../_commonjsHelpers-_1FafXWI.js';
import '../use-progress/index.js';
import '../use-trailing-debounce/index.js';

function TextField(_ref) {
  var _context$config;

  var id = _ref.id,
      name = _ref.name,
      label = _ref.label,
      placeholder = _ref.placeholder,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? "text" : _ref$type,
      value = _ref.value,
      autoFocus = _ref.autoFocus,
      onChange = _ref.onChange,
      prepend = _ref.prepend,
      append = _ref.append,
      _ref$showLabel = _ref.showLabel,
      showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
      required = _ref.required;
  var field = useField({
    id: id,
    name: name,
    value: value,
    onChange: onChange
  });
  var state = field.error ? "error" : "default";
  var context = useFormContext() || {};
  return /*#__PURE__*/React__default.createElement(Stack, {
    spacing: 2
  }, /*#__PURE__*/React__default.createElement(Label, {
    htmlFor: field.id,
    visuallyHidden: !showLabel
  }, label), /*#__PURE__*/React__default.createElement(Input, {
    id: field.id,
    autoFocus: autoFocus,
    name: name,
    value: field.value,
    placeholder: placeholder,
    type: type,
    onBlur: field.onBlur,
    onChange: field.onChange,
    prepend: prepend,
    append: append,
    state: state,
    required: required
  }), ((_context$config = context.config) === null || _context$config === void 0 ? void 0 : _context$config.validation) && /*#__PURE__*/React__default.createElement(InlineValidation, {
    name: name
  }));
}

TextField.propTypes = {
  className: PropTypes.string,
  id: PropTypes.string,
  name: PropTypes.string.isRequired,
  label: PropTypes.string,
  placeholder: PropTypes.string,
  type: PropTypes.string,
  // For type, we suggest one of `text`, `password`, `url`, `email`, and suggest `number` less
  value: PropTypes.string,
  autoFocus: PropTypes.string,
  prepend: PropTypes.any,
  append: PropTypes.any,
  onChange: PropTypes.func,
  showLabel: PropTypes.bool,
  required: PropTypes.bool
};

export { TextField as default };
