import React from 'react';
import Autocomplete from '../../components/autocomplete';

class AutocompleteTest extends React.Component {
  state = {
    simple: 'Spain',
    simpleShowAll: 'England',
    multipleArray: ['ES-es', 'TH-th'],
    multipleObject: { 'ES-es': 'Spain', 'TH-th': 'Thailand' },
    countriesArray: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
    countriesObject: {
      'EN-gb': 'England',
      'EN-en': 'United States of America',
      'EN-nz': 'New Zealand',
    },
  };

  handleFocus = (event) => {
    console.log('This is focused');
    console.log(event);
  };

  handleMultipleArrayChange = (value) => {
    this.setState({
      multipleArray: value,
      countriesObject: {
        ...this.state.countriesObject,
        ...(value[0] && !this.state.countriesObject[value[0]]) ? { [value[0]]: value[0] } : {},
      },
    });
  };

  handleMultipleObjectChange = (value) => {
    this.setState({
      multipleObject: value,
    });
  };

  handleSimpleChange = (value) => {
    this.setState({ simple: value });
  };

  handleSimpleShowAllChange = (value) => {
    this.setState({ simpleShowAll: value });
  };

  render() {
    return (
      <section>
        <h5>Autocomplete</h5>
        <p>You can have a multiple or simple autocomplete.</p>

        <Autocomplete
          allowCreate
          keepFocusOnChange
          label="Pick multiple elements..."
          onFocus={this.handleFocus}
          onChange={this.handleMultipleArrayChange}
          source={this.state.countriesObject}
          suggestionMatch="anywhere"
          value={this.state.multipleArray}
        />

        <Autocomplete
          allowCreate
          label="Pick multiple elements with object value..."
          onChange={this.handleMultipleObjectChange}
          showSelectedWhenNotInSource
          source={this.state.countriesObject}
          suggestionMatch="anywhere"
          value={this.state.multipleObject}
        />

        <Autocomplete
          hint="Elements up to you..."
          label="Choose a country"
          multiple={false}
          onChange={this.handleSimpleChange}
          source={this.state.countriesArray}
          value={this.state.simple}
        />

        <Autocomplete
          hint="Elements up to you..."
          label="Choose a country (showing all suggestions)"
          multiple={false}
          onChange={this.handleSimpleShowAllChange}
          showSuggestionsWhenValueIsSet
          source={this.state.countriesArray}
          value={this.state.simpleShowAll}
        />
      </section>
    );
  }
}

export default AutocompleteTest;

@@ -504,16 +504,294 @@
 %0A    %7D,%0A
+    simpleMonth: 0,%0A    monthsObject: %7B%0A      0: 'January',%0A      1: 'February',%0A      2: 'March',%0A      3: 'April',%0A      4: 'May',%0A      5: 'June',%0A      6: 'July',%0A      7: 'August',%0A      8: 'September',%0A      9: 'October',%0A      10: 'November',%0A      11: 'December',%0A    %7D%0A
   %7D;%0A%0A  
@@ -1438,16 +1438,120 @@
 ;%0A  %7D;%0A%0A
+  handleSimpleMonthChange = (value) =%3E %7B%0A    this.setState(%7B simpleMonth: parseInt(value, 10) %7D);%0A  %7D;%0A%0A
   render
@@ -2957,16 +2957,354 @@
       /%3E
+%0A%0A        %3CAutocomplete%0A          hint=%22Months (Falsy object key example)%22%0A          label=%22Months (Falsy object key example)%22%0A          multiple=%7Bfalse%7D%0A          onChange=%7Bthis.handleSimpleMonthChange%7D%0A          showSuggestionsWhenValueIsSet%0A          source=%7Bthis.state.monthsObject%7D%0A          value=%7Bthis.state.simpleMonth%7D%0A        /%3E
 %0A      %3C

Add falsy key example to AutocompleteTest