import React from 'react';
import ReactDOM from 'react-dom';
import Search from '..';

const dataSource = [
  {
    label: 'Recent label',
    value: 'Recent',
  },
  {
    label: 'dress label',
    value: 'dress',
  },
  {
    label: 'sunglasses label',
    value: 'sunglasses',
  },
  {
    label: 't-shirt label',
    value: 't-shirt',
  },
];

class App extends React.Component {
  onSearch(value, filterValue) {
    console.log('onSearch', value, filterValue);
  }

  onChange(value, type, e) {
    console.log('onChange', value, type, e);
    this.setState({
      value,
    });
  }

  render() {
    return (
      <div>
        <p>auto highlight first item</p>
        <Search
          dataSource={dataSource}
          style={{ width: '400px' }}
          fillProps="label"
          onChange={this.onChange.bind(this)}
          onSearch={this.onSearch.bind(this)}
        />
        <p>no default highlight item, should use UP/DOWN</p>
        <Search
          // @ts-ignore
          autoHighlightFirstItem={false}
          style={{ width: '400px' }}
          fillProps="label"
          dataSource={dataSource}
          onChange={this.onChange.bind(this)}
          onSearch={this.onSearch.bind(this)}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('search-demo-2'));