import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

import PropTypes from 'prop-types';

const BLANK_RESTAURANT = {
  name: '',
  type: '',
  hood: ''
}

class AddRestaurant extends Component {
  state = {
    name: '',
    type: '',
    hood: ''
  }

  static PropTypes = {
    name: PropTypes.string.required,
    type: PropTypes.string.required,
    hood: PropTypes.string
  }

  handleChange = (e, name) => {
    this.setState({
      [name]: e.target.value
    });
  }

  handleSelect = (event, index, value) => {
    this.setState({
      hood: value
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();

    if(this.state.name === '') return;

    this.props.addFavorite(this.state);

    this.setState(BLANK_RESTAURANT)
  }

  render() {
    return (
      <div className="App">
        <form>
          <div>
            <TextField
              hintText='Restaurant Name'
              underlineFocusStyle={{borderColor: '#9FA8DA'}}
              name='name'
              value={this.state.name}
              onChange={(e) => this.handleChange(e, "name")}
            />
          </div>

          <div>
            <TextField
              hintText='Food Type'
              underlineFocusStyle={{borderColor: '#5C6BC0'}}
              name='type'
              value={this.state.type}
              onChange={(e) => this.handleChange(e, "type")}
            />
          </div>

          <div>
            <SelectField
              hintText='Neighborhood'
              name='hood'
              value={this.state.hood}
              onChange={this.handleSelect}
            >
              <MenuItem value="Northwest" primaryText="Northwest" />
              <MenuItem value="Northeast" primaryText="Northeast" />
              <MenuItem value="Southwest" primaryText="Southwest" />
              <MenuItem value="Southeast" primaryText="Southeast" />
              <MenuItem value="North Portland" primaryText="North Portland" />
            </SelectField>
          </div>

          <RaisedButton default={true} type='submit' onClick={this.handleSubmit} label='Add Restuarant' />
        </form>
      </div>
    );
  }
}

export default AddRestaurant;

@@ -663,22 +663,26 @@
   handle
-Select
+HoodChange
  = (even
@@ -746,32 +746,135 @@
 ue%0A    %7D);%0A  %7D%0A%0A
+  handleFoodTypeChange = (event, index, value) =%3E %7B%0A    this.setState(%7B%0A      type: value%0A    %7D);%0A  %7D%0A%0A
   handleSubmit =
@@ -1419,35 +1419,37 @@
 v%3E%0A            %3C
-Tex
+Selec
 tField%0A         
@@ -1627,58 +1627,854 @@
 ge=%7B
-(e) =%3E this.handleChange(e, %22type%22)%7D%0A            /
+this.handleFoodTypeChange%7D%0A            %3E%0A              %3CMenuItem value=%22Indian%22 primaryText=%22Indian%22 /%3E%0A              %3CMenuItem value=%22Chinese%22 primaryText=%22Chinese%22 /%3E%0A              %3CMenuItem value=%22American%22 primaryText=%22American%22 /%3E%0A              %3CMenuItem value=%22Thai%22 primaryText=%22Thai%22 /%3E%0A              %3CMenuItem value=%22Breakfast%22 primaryText=%22Breakfast%22 /%3E%0A              %3CMenuItem value=%22Vietnamese%22 primaryText=%22Vietnamese%22 /%3E%0A              %3CMenuItem value=%22Japanese%22 primaryText=%22Japanese%22 /%3E%0A              %3CMenuItem value=%22Mexican%22 primaryText=%22Mexican%22 /%3E%0A              %3CMenuItem value=%22Russian%22 primaryText=%22Russian%22 /%3E%0A              %3CMenuItem value=%22Italian%22 primaryText=%22Italian%22 /%3E%0A              %3CMenuItem value=%22French%22 primaryText=%22French%22 /%3E%0A              %3CMenuItem value=%22Greek%22 primaryText=%22Greek%22 /%3E%0A            %3C/SelectField
 %3E%0A  
@@ -2564,24 +2564,85 @@
 ighborhood'%0A
+              underlineFocusStyle=%7B%7BborderColor: '#3949AB'%7D%7D%0A
             
@@ -2728,22 +2728,26 @@
 s.handle
-Select
+HoodChange
 %7D%0A      

change food type to dropdown