import React, { Component } from 'react';

class InputField extends Component {
  /** */
  render() {
    let {
      label,
      name,
      onChange,
      pattern,
      patternMessage,
      readOnly,
      required,
      type,
    } = this.props;

    let fieldType = type ? type : 'text';
    let patternMsg;
    if (pattern && patternMessage) {
      patternMsg = (<span className="patternMessage">{patternMessage}</span>);
    }

    let value = this.props.value || '';

    return (
      <div className="form-group">
        <label htmlFor={name}>{label}</label>
        <input type={fieldType} onChange={onChange} name={name} id={name}
          pattern={pattern} required={required} readOnly={readOnly}
          value={value} className="form-control" />
        {patternMsg}
      </div>
      );
  }
}

/**
 * Proptypes
 */
InputField.propTypes = {
  name: React.PropTypes.string.isRequired,
  label: React.PropTypes.string.isRequired,
  type: React.PropTypes.string,
  pattern: React.PropTypes.string,
  patternMessage: React.PropTypes.string,
  onChange: React.PropTypes.func.isRequired,
  readOnly: React.PropTypes.bool,
  required: React.PropTypes.bool,
};

export default InputField;