function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { memo, useState, useRef } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import uuid from 'uuid';
import Icon from '../Icon';
import MarkdownLabel from './MarkdownLabel';

const TextInput = ({
  input,
  meta: {
    error,
    invalid,
    touched
  },
  label,
  placeholder,
  fieldLabel,
  className,
  type,
  autoFocus,
  hidden,
  adornmentLeft,
  adornmentRight
}) => {
  const id = useRef(uuid());
  const [hasFocus, setFocus] = useState(false);

  const handleFocus = (...args) => {
    setFocus(true);

    if (input.onFocus) {
      input.onFocus(...args);
    }
  };

  const handleBlur = (...args) => {
    setFocus(false);

    if (input.onBlur) {
      input.onBlur(...args);
    }
  };

  const hasLeftAdornment = !!adornmentLeft;
  const hasRightAdornment = !!adornmentRight;
  const hasAdornment = hasLeftAdornment || hasRightAdornment;
  const seamlessClasses = cx(className, 'form-field-text', {
    'form-field-text--has-focus': hasFocus,
    'form-field-text--has-error': invalid && touched && error,
    'form-field-text--adornment': hasAdornment,
    'form-field-text--has-left-adornment': hasLeftAdornment,
    'form-field-text--has-right-adornment': hasRightAdornment
  });
  const anyLabel = fieldLabel || label;
  return /*#__PURE__*/React.createElement("div", {
    className: "form-field-container",
    hidden: hidden
  }, anyLabel && /*#__PURE__*/React.createElement(MarkdownLabel, {
    label: anyLabel
  }), /*#__PURE__*/React.createElement("div", {
    className: seamlessClasses
  }, /*#__PURE__*/React.createElement("input", _extends({
    id: id.current,
    name: input.name,
    className: "form-field form-field-text__input",
    placeholder: placeholder,
    autoFocus: autoFocus // eslint-disable-line
    ,
    type: type // eslint-disable-next-line react/jsx-props-no-spreading

  }, input, {
    onBlur: handleBlur,
    onFocus: handleFocus
  })), adornmentLeft && /*#__PURE__*/React.createElement("div", {
    className: "form-field-text__adornment-left"
  }, adornmentLeft), adornmentRight && /*#__PURE__*/React.createElement("div", {
    className: "form-field-text__adornment-right"
  }, adornmentRight), invalid && touched && /*#__PURE__*/React.createElement("div", {
    className: "form-field-text__error"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "warning"
  }), error)));
};

TextInput.propTypes = {
  adornmentLeft: PropTypes.node,
  adornmentRight: PropTypes.node,
  autoFocus: PropTypes.bool,
  className: PropTypes.string,
  fieldLabel: PropTypes.string,
  hidden: PropTypes.bool,
  input: PropTypes.object,
  label: PropTypes.string,
  meta: PropTypes.object,
  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  type: PropTypes.oneOf(['text', 'number', 'search'])
};
TextInput.defaultProps = {
  adornmentLeft: null,
  adornmentRight: null,
  autoFocus: false,
  className: '',
  fieldLabel: null,
  hidden: false,
  input: {},
  label: null,
  meta: {},
  placeholder: 'Enter some text...',
  type: 'text'
};
export default /*#__PURE__*/memo(TextInput);