import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addBar } from '../actions/barActions';

class AddBar extends Component {
  constructor(props) {
    super(props)

    this.state = {
      name: '',
      address: '',
      city: '',
      state: '',
      rating: 1,
    }
  }

  handleOnChange = event => {
    const { name, value } = event.target
    this.setState({
      [name]: value
    })
  }

  handleOnSubmit = event => {
    event.preventDefault();
    const { addBar } = this.props
    addBar(this.state)
    this.setState({
      name: '',
      address: '',
      city: '',
      state: '',
      rating: 1,
    });
  }

  render() {
    return (
      <div>
        <form className="add-bar-form" onSubmit={this.handleOnSubmit}>
          <label htmlFor="bar_name">Name</label>
          <input
            type="text"
            name="name"
            value={this.state.name}
            onChange={this.handleOnChange}
            placeholder="Bar Name"
          />

          <label htmlFor="bar_address">Address</label>
          <input
            type="text"
            name="address"
            value={this.state.address}
            onChange={this.handleOnChange}
            placeholder="Street Address"
          />

          <label htmlFor="bar_city">City</label>
          <input
            type="text"
            name="city"
            value={this.state.city}
            onChange={this.handleOnChange}
            placeholder="City"
          />

          <label htmlFor="bar_state">State</label>
          <select
            name="state"
            value={this.state.state}
            onChange={this.handleOnChange}>
          	<option value="AL">Alabama</option>
          	<option value="AK">Alaska</option>
          	<option value="AZ">Arizona</option>
          	<option value="AR">Arkansas</option>
          	<option value="CA">California</option>
          	<option value="CO">Colorado</option>
          	<option value="CT">Connecticut</option>
          	<option value="DE">Delaware</option>
          	<option value="DC">District Of Columbia</option>
          	<option value="FL">Florida</option>
          	<option value="GA">Georgia</option>
          	<option value="HI">Hawaii</option>
          	<option value="ID">Idaho</option>
          	<option value="IL">Illinois</option>
          	<option value="IN">Indiana</option>
          	<option value="IA">Iowa</option>
          	<option value="KS">Kansas</option>
          	<option value="KY">Kentucky</option>
          	<option value="LA">Louisiana</option>
          	<option value="ME">Maine</option>
          	<option value="MD">Maryland</option>
          	<option value="MA">Massachusetts</option>
          	<option value="MI">Michigan</option>
          	<option value="MN">Minnesota</option>
          	<option value="MS">Mississippi</option>
          	<option value="MO">Missouri</option>
          	<option value="MT">Montana</option>
          	<option value="NE">Nebraska</option>
          	<option value="NV">Nevada</option>
          	<option value="NH">New Hampshire</option>
          	<option value="NJ">New Jersey</option>
          	<option value="NM">New Mexico</option>
          	<option value="NY">New York</option>
          	<option value="NC">North Carolina</option>
          	<option value="ND">North Dakota</option>
          	<option value="OH">Ohio</option>
          	<option value="OK">Oklahoma</option>
          	<option value="OR">Oregon</option>
          	<option value="PA">Pennsylvania</option>
          	<option value="RI">Rhode Island</option>
          	<option value="SC">South Carolina</option>
          	<option value="SD">South Dakota</option>
          	<option value="TN">Tennessee</option>
          	<option value="TX">Texas</option>
          	<option value="UT">Utah</option>
          	<option value="VT">Vermont</option>
          	<option value="VA">Virginia</option>
          	<option value="WA">Washington</option>
          	<option value="WV">West Virginia</option>
          	<option value="WI">Wisconsin</option>
          	<option value="WY">Wyoming</option>
          </select>

          <label htmlFor="bar_rating">Rating</label>
          <select
            name="rating"
            value={this.state.rating}
            onChange={this.handleOnChange}>
            <option value="5">5</option>
            <option value="4">4</option>
            <option value="3">3</option>
            <option value="2">2</option>
            <option value="1">1</option>
          </select>

          <button>Add Bar</button>
        </form>
      </div>
    )
  }
}

export default connect(null, { addBar })(AddBar);
