import React, { Component } from 'react';
import { Async } from 'react-select';
import GetAllConsumers from './getAllConsumers';
import FindLikeConsumers from './findLikeConsumers';
import 'react-select/dist/react-select.css';

export default class FindConsumer extends Component<*, State> {
	constructor(props) {
		super(props);
		this.state = {
			selectedOption: '',
			todosConsumidores: []
		};
		this.handleChange = this.handleChange.bind(this);
		GetAllConsumers().then((responseAllConsumers) => {
			this.setState({ todosConsumidores: responseAllConsumers }); // sets with the result of the query to nodejs
			return { allConsumers: responseAllConsumers };
		});
	}

	render() {
		const { selectedOption } = this.state;
		const value = selectedOption && selectedOption.title;
		const getOptions = (input) => {
			if (input.length > 0 || input.length === 0) {
				return FindLikeConsumers(input, this.state.todosConsumidores).then((response) => {
					return { options: response };
				});
			}
		};

		return (
			<div>
				<Async
					loadOptions={getOptions}
					valueKey={'value'}
					labelKey={'label'}
					onChange={this.handleChange}
					value={value}
				/>
			</div>
		);
	}

	handleChange = (selectedOption) => {
		console.log(selectedOption.value);
		this.setState({ selectedOption: selectedOption });
	};
}