const React = require("react");

class WishlistForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {name: "", wish: "", priority: 1};

    this.handleSubmit = this.handleSubmit.bind(this);

    this.handleName = this.handleName.bind(this);
    this.handleWish = this.handleWish.bind(this);
    this.handlePriority = this.handlePriority.bind(this);
  }

  handleSubmit(event) {
    this.props.send(this.state);
    event.preventDefault();
  }

  handleName(event) {
    this.setState({name: event.target.value});
  }

  handleWish(event) {
    this.setState({wish: event.target.value});
  }

  handlePriority(event) {
    this.setState({priority: event.target.value});
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input id="name" onChange={this.handleName} />
        <textarea id="wish" onChange={this.handleWish}></textarea>
        <select id="priority" value={this.state.priority} onChange={this.handlePriority}>
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
          <option value={5}>5</option>
        </select>
      </form>
    );
  }
};