import React from 'react';

import { TextField } from 'material-ui';
import AutoSuggest from 'react-autosuggest';

import { CheckList } from '../../index.js';

const renderInputComponent = inputProps => (
  <TextField
    hintText="Search"
    floatingLabelText="Find what you need"
    style={{
      width: '70%',
    }}
    {...inputProps}
  />
);

class TabSearch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      suggestions: [],
    };
  }


  render() {
    const { value, suggestions } = this.state;

    const inputProps = {
      value,
      onChange: this.onChange
    };

    return (
      <div>
        <AutoSuggest
          suggestions={suggestions}
          renderInputComponent={renderInputComponent(inputProps)}
        />
      </div>
    );
  }
}

export default TabSearch;