function-execution-js

import React, {PropTypes, Component} from 'react';
import {ModalContainer, ModalDialog} from 'react-modal-dialog';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { updateZip } from '../actions/index';
import { updatePrice } from '../actions/updatePrice';
import { updateRadius } from '../actions/updateRadius';
import Yelp from 'yelp';

class ModalWindow extends Component {

	constructor(props) {
		
		super(props);
		this.state = {
			isShowingModal: true,
			zipCode: "85281",
			priceLimit: "$5.50",
			radiusMax: "10000"
		}

		this.onClick = this.onClick.bind(this);
	}

	handleClick = () => this.setState({isShowingModal: true})
	handleClose = () => this.setState({isShowingModal: false})

	onClick = (event) => {
		event.preventDefault(); 
		//Need to pass in the price, the location, the radius
		this.props.actions.updateZip(this.state.zipCode, this.state.priceLimit, this.state.radiusMax);
		this.props.actions.updatePrice(this.state.priceLimit);
		this.props.actions.updateRadius(this.state.radiusMax);
		this.setState({isShowingModal: false});
	} 

	renderMenuItems = (menuObject) => {
		return (
				menuObject.map(event => {
					return <li>{event['item']} - <b>{event['price']}</b></li>
				})
			)
	}

	renderNeighbors = (input) => {
		//Return the mapped elements 

		if (!input) {
			return (<div></div>)
		}

		let return_items = []
		let counter = 0;
		Object.keys(input).forEach(key => {

			let unique_key = `unique-${counter}`
			let unique_key2 = `unique2-${counter}`
			let unique_key_modal = `#unique-${counter}`
			counter+=1;


			console.log()

			return_items.push(
			<div key={unique_key2}>
	            <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12">              
	                <div className="hover ehover1v2">
	                    <img className="gallery-icon" src={input[key]['image']} alt="" />
	                        <div className="overlay">
	                            <h2>{key}</h2>
	                            <button className="info" data-toggle="modal" data-target={unique_key_modal}>View Menu
	                        </button>
	                        </div>              
	                </div>
	            </div>


            <div id={unique_key} className="modal fade" key={unique_key}>
                <div className="modal-dialog modal-lg">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h2 className="modal-title">Menu for {key}</h2>
                        </div>
                        <div className="modal-body">
                            <h3>Prices are estimates for your region.</h3>
                            <ul>
                            	{this.renderMenuItems(input[key]['items'])}
                            </ul>

                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
		</div>

			)
		})

		return (
			return_items
		)
	}

					// this.state.isShowingModal &&
					// <ModalContainer onClose={this.handleClose}>
					//   <ModalDialog onClose={this.handleClose}>
					// 	<h1>Feed My Hunger</h1>

					// 	<p><input className="modalInput" placeholder="Enter $ Limit" onChange={ event => { this.setState( { priceLimit: event.target.value } ) } }/></p>
					// 	<p><input className="modalInput" placeholder="Enter city/state/zip" onChange={ event => { this.setState( { zipCode: event.target.value } ) } }/></p>
					// 	<p><input className="modalInput" placeholder="Enter max radius" onChange={ event => { this.setState( { radiusMax: event.target.value } ) } }/></p>

					// 	<button type="button" className="btn btn-primary modalInput" onClick={event => this.onClick(event)}>Feed Me!</button>
					//   </ModalDialog>
					// </ModalContainer>
	render() {

		if (this.props.zipCode){
			this.renderNeighbors(this.props.zipCode)
		}
		return ( 
			<div>
			<button className="remodal-confirm" onClick={event => this.onClick(event)}>Feed Me</button>
				<ul>
					{this.renderNeighbors(this.props.zipCode)}
				</ul>
				
		            <div className="remodal" data-remodal-id="modal">
		              <button data-remodal-action="close" className="remodal-close"></button>
		              <h3>FrugalEats Search Information</h3>

		              <hr/>

		              <span>
		              <i className="fa fa-info" aria-hidden="true"></i> The information below will query restaurants and menus items that you can afford in your area.
		              </span>
		              <hr/>
		                <span className="input input--kaede">
		                    <input className="input__field input__field--kaede" type="text" id="input-35" placeholder="$5.00" onChange={ event => { this.setState( { priceLimit: event.target.value } ) } }/>
		                    <label className="input__label input__label--kaede" htmlFor="input-35">
		                        <span className="input__label-content input__label-content--kaede">Price Limit</span>
		                    </label>
		                </span>
		                <span className="input input--kaede">
		                    <input className="input__field input__field--kaede" type="text" id="input-36" placeholder="Goldwater Engineering Tempe, AZ" onChange={ event => { this.setState( { zipCode: event.target.value } ) } }/>
		                    <label className="input__label input__label--kaede" htmlFor="input-36">
		                        <span className="input__label-content input__label-content--kaede">Location</span>
		                    </label>
		                </span>
		                <span className="input input--kaede">
		                    <input className="input__field input__field--kaede" type="text" id="input-37" placeholder="2.5" onChange={ event => { this.setState( { radiusMax: event.target.value } ) } }/>
		                    <label className="input__label input__label--kaede" htmlFor="input-37">
		                        <span className="input__label-content input__label-content--kaede">Radius (Miles)</span>
		                    </label>
		                </span>
		              <br/>
		              <button data-remodal-action="cancel" className="remodal-cancel">Cancel</button>
		              <button className="remodal-confirm" onClick={() => {alert('hi')}}>Feed Me</button>
		            </div>
				
			</div>
		)
	}
}

function mapStateToProps(state) {
	return (
		{ 
			priceLimit: state.priceLimit,
			zipCode: state.zipCode,
			radiusMax: state.radiusMax
		}
	)
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      updateZip: bindActionCreators(updateZip, dispatch),
      updatePrice: bindActionCreators(updatePrice, dispatch),
      updateRadius: bindActionCreators(updateRadius, dispatch)
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(ModalWindow);