function Select({ inputName, inputId, label, collection, value, selectPrompt, onChange, required }) {
  const options = collection.map((item) =>
    <option key={item[0]} value={item[0]}>{item[1]}</option>
  );
  return (
    <div className="form-group">
      <label className="form-control-label" htmlFor={inputId}>{label}</label>
      <select
        required={required}
        name={inputName}
        id={inputId}
        className="select form-control"
        value={value}
        onChange={onChange}
        aria-describedby={`${inputId}_error`}
      >
        <option value="">{selectPrompt}</option>
        {options}
      </select>
      <span id={`${inputId}_error`} className="form-control-invalid" />
    </div>
  );
}

Select.propTypes = {
  inputName: React.PropTypes.string.isRequired,
  inputId: React.PropTypes.string.isRequired,
  collection: React.PropTypes.array.isRequired,
  label: React.PropTypes.string,
  value: React.PropTypes.string,
  selectPrompt: React.PropTypes.string,
  onChange: React.PropTypes.func,
  required: React.PropTypes.bool,
};

Select.defaultProps = {
  selectPrompt: 'Please select',
};

window.Select = Select;