import React from 'react';
import createClass from 'create-react-class';
import _ from 'lodash';
import { Autocomplete } from '../../../index';

const wordlist = [
	'abaft',
	'abounding',
	'abrasive',
	'accidental',
	'actor',
	'addition',
	'adhesive',
	'adjustment',
	'advertisement',
	'applaud',
	'appreciate',
	'awesome',
	'ball',
	'beautiful',
	'beef',
	'bell',
	'bent',
	'bite-sized',
	'bitter',
	'black',
	'bloody',
	'bulb',
	'bump',
	'calculator',
	'camp',
	'care',
	'care',
	'caring',
	'celery',
	'challenge',
	'chase',
	'cherries',
	'chew',
	'choke',
	'circle',
	'clean',
	'club',
	'coat',
	'cold',
	'colossal',
	'command',
	'competition',
	'confuse',
	'continue',
	'crawl',
	'curve',
	'cute',
	'dad',
	'damaged',
	'death',
	'debonair',
	'decorate',
	'deeply',
	'delicious',
	'destroy',
	'destruction',
	'diligent',
	'disapprove',
	'discussion',
	'doubtful',
	'dress',
	'drop',
	'dust',
	'eatable',
	'educate',
	'efficacious',
	'elegant',
	'elfin',
	'embarrassed',
	'enjoy',
	'envious',
	'exchange',
	'excited',
	'existence',
	'fast',
	'fear',
	'flight',
	'float',
	'food',
	'force',
	'fork',
	'frightening',
	'geese',
	'ghost',
	'giant',
	'gigantic',
	'glow',
	'goofy',
	'grandiose',
	'great',
	'grumpy',
	'guide',
	'hair',
	'hall',
	'head',
	'heat',
	'hesitant',
	'hill',
	'home',
	'horn',
	'hospital',
	'hurt',
	'idea',
	'ill-informed',
	'immense',
	'imminent',
	'insect',
	'insurance',
	'intelligent',
	'iron',
	'jaded',
	'jagged',
	'jeans',
	'jelly',
	'judge',
	'kitty',
	'kneel',
	'knot',
	'knotty',
	'letter',
	'level',
	'lie',
	'lip',
	'literate',
	'loaf',
	'lovely',
	'madly',
	'meaty',
	'men',
	'merciful',
	'messy',
	'minister',
	'modern',
	'multiply',
	'muscle',
	'mysterious',
	'natural',
	'naughty',
	'neat',
	'note',
	'nut',
	'nutritious',
	'obedient',
	'obsolete',
	'old-fashioned',
	'onerous',
	'opposite',
	'order',
	'oval',
	'painstaking',
	'paint',
	'pale',
	'parallel',
	'parched',
	'park',
	'past',
	'pencil',
	'perfect',
	'permit',
	'phobic',
	'picture',
	'pin',
	'pink',
	'please',
	'plug',
	'pop',
	'possess',
	'preserve',
	'pretty',
	'print',
	'puffy',
	'pushy',
	'quarter',
	'race',
	'racial',
	'raise',
	'rampant',
	'rare',
	'record',
	'release',
	'retire',
	'rhetorical',
	'rhyme',
	'ring',
	'road',
	'rub',
	'rule',
	'savory',
	'scared',
	'screw',
	'seemly',
	'selfish',
	'shape',
	'shiver',
	'shrill',
	'sign',
	'signal',
	'silk',
	'silky',
	'silly',
	'simplistic',
	'sister',
	'skillful',
	'sleep',
	'small',
	'smash',
	'society',
	'sofa',
	'soggy',
	'song',
	'sound',
	'soup',
	'sparkling',
	'spiders',
	'spot',
	'stage',
	'standing',
	'stare',
	'steep',
	'stiff',
	'store',
	'stranger',
	'swanky',
	'taste',
	'tasteless',
	'tax',
	'telling',
	'territory',
	'third',
	'thirsty',
	'thumb',
	'tiny',
	'toe',
	'touch',
	'transport',
	'tremble',
	'trite',
	'twist',
	'two',
	'umbrella',
	'unkempt',
	'unlock',
	'unnatural',
	'unsightly',
	'uttermost',
	'wait',
	'walk',
	'wander',
	'warn',
	'weary',
	'wholesale',
	'willing',
	'winter',
	'worthless',
	'writer',
	'zippy',
];

export default createClass({
	getInitialState() {
		return {
			value: '',
		};
	},

	handleChange(value) {
		this.setState({
			value,
		});
	},

	render() {
		const { value } = this.state;
		const valuePattern = new RegExp(_.escapeRegExp(value), 'i');
		const filteredWordList = value !== ''
			? _.filter(wordlist, word => valuePattern.test(word))
			: wordlist;

		return (
			<section>

				<section>
					Current Value: {this.state.value}
				</section>

				<Autocomplete
					placeholder="Enter a word..."
					suggestions={
						_.size(filteredWordList) <= 1 && _.first(filteredWordList) === value
							? []
							: filteredWordList
					}
					onChange={this.handleChange}
				/>

			</section>
		);
	},
});