import React from 'react';
import { getItems } from './utils';
import { AutoComplete } from './components';
import {
  withStyles,
  debounce,
  killEvent,
  handleRenderError,
} from 'react-decoration';

@withStyles({
  container: {
    width: '100%',
    height: 'auto',
  },
  input: {
    width: 250,
  },
})
@handleRenderError((ex) => <div className="danger">{ex.message}<div>)
class SampleForm extends React.Component {

  state = {
    value: 'Hello!',
    items: [],
  }

  @debounce(500)
  handleChange(e) {
    getItems().then((response) => {
      this.setState({
        value: this.state.value,
        items: response.data.items,
      });
    });

    this.setState({
      value: e.target.value,
      items: this.state.items,
    });
  }

  @killEvent
  handleSubmit() {
    // default prevented
    // propagation stopped

    alert(`AutoComplete value is: ${this.state.value}`);
  }

  render() {
    const { styles } = this.props;
    return (
      <div style={styles.container}>
        <AutoComplete
          value={this.state.value}
          items={this.state.items}
          onChange={this.handleChange}
          style={styles.input}
        />
        <button onClick={this.handleSubmit}>
          Submit
        </button>
      </div>
    );
  }
}