import React from 'react';
import PropTypes from 'prop-types';

import TextInput from '../../TextInput';

import '../autocomplete.scss'; // eslint-disable-line no-unused-vars


const propTypes = {
  onChange: PropTypes.func,
  onSubmit: PropTypes.func,
  onKeyDown: PropTypes.func,
  onFocus: PropTypes.func,
  value: PropTypes.string,
  placeholder: PropTypes.string,
  input: PropTypes.object,
  label: PropTypes.string,
  className: PropTypes.string
};

const defaultProps = {
  onChange: () => { },
  onSubmit: () => { },
  onKeyDown: () => { },
  onFocus: () => { },
  value: '',
  placeholder: undefined,
  input: {},
  label: '',
  className: undefined
};


/**
 * Autocomplete Search Group
 *
 */
const SearchGroup = ({ value, placeholder, onChange, onSubmit, onKeyDown, onFocus, input, label, className }) => (
  <form className={className} autoComplete="off" onSubmit={onSubmit} styleName="input-group">
    <TextInput
      onChange={onChange}
      onKeyDown={onKeyDown}
      onFocus={onFocus}
      value={value}
      placeholder={placeholder}
      input={input}
      label={label}
    />
  </form>
);


SearchGroup.propTypes = propTypes;
SearchGroup.defaultProps = defaultProps;

export default SearchGroup;
