import React from 'react';

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

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

const components = [
  {
    title: 'color',
    suggestions: [
      {
        name: 'red',
      },
      {
        name: 'yellow',
      },
    ],
  },
  {
    title: 'tree',
    suggestions: [
      {
        name: 'Oak',
      },
      {
        name: 'Elm',
      },
    ],
  },
];

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

const getSuggestions = (value) => {
  const inputValue = value.trim().toLowerCase();
  return inputValue.length === 0
    ? []
    : components.map(section => (
      {
        title: section.title,
        suggestions: section.suggestions.filter(suggestion => (suggestion !== false)),
      }
    ));
};

const getSectionSuggestions = section => section.suggestions;

const getSuggestionValue = suggestion => suggestion.name;

const renderSectionTitle = section => (
  <div>{section.title}</div>
);

const renderSuggestion = suggestion => (
  <div>{suggestion.name}</div>
);


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

    this.onChange = this.onChange.bind(this);
    this.onSuggestionsFetchRequested = this.onSuggestionsFetchRequested.bind(this);
    this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this);
  }

  onChange(event, { newValue }) {
    this.setState({
      value: newValue,
    });
  }

  onSuggestionsFetchRequested({ value }) {
    this.setState({
      suggestions: getSuggestions(value),
    });
  }

  onSuggestionsClearRequested() {
    this.setState({
      suggestions: [],
    });
  }

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

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

    return (
      <div>
        <AutoSuggest
          suggestions={suggestions}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
          getSuggestionValue={getSuggestionValue}
          renderSuggestion={renderSuggestion}
          renderInputComponent={renderInputComponent}
          multiSection
          renderSectionTitle={renderSectionTitle}
          getSectionSuggestions={getSectionSuggestions}
          inputProps={inputProps}
        />
      </div>
    );
  }
}

export default TabSearch;