const Modal = props => (
  <div id="modal1" className="modal">
    <div className="modal-content">
      <div id="row">
          <div className="input-field col s12">
            <input id="recipe_name" type="text" className="validate" />
            <label for="recipe_name">Recipe Name:</label>
          </div> 
        </div>
        <div className="row">
          <div className="input-field col s12">
            <input id="ingredients" type="text" placeholder="Enter Ingredients,Separated,By Commas" />
            <label for="ingredients">Ingredients:</label>
          </div>          
       </div>
    </div>
    <div className="modal-footer">
      <a href="#" className="modal-action modal-close waves-effect waves-green btn-flat" onClick={props.addRecipe}>Add Recipe</a>
      <a href="#" className="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
    </div>
  </div>
);


const Items = props => (
  <div className="col offset-l2 l8 s12">
    <ul className="collapsible blue-grey-text">
      {props.recipes.map(recipe =>
      <li>
        <div className="collapsible-header blue-grey lighten-5">{recipe.name}</div>
        <div className="collapsible-body blue-grey lighten-5">

          <div className="collection with-header">
            <li className="collection-header blue-grey lighten-4"><h4>Ingredients</h4></li>
              {
              //props.recipe.ingredients.map(ingredient =>
                <li className="collection-item blue-grey lighten-4">{recipe.ingredients.map( e => <p>{e}</p> )}</li>
              //)
              }
          </div>
          <p className="row">
            <div className="col s4 offset-s2 center">
              <a href="#" className="btn waves-effect waves-light red modal-trigger"><i className="material-icons left">delete</i>Delete</a>  
            </div>                
            <div className="col s4 center">
              <a data-target="modal1" href="#" className="btn waves-effect waves-light blue darken-4 modal-trigger"><i className="material-icons left">edit</i>Edit</a>

            </div>
          </p>
        </div>                
      </li>
      )}
    </ul>
  </div>    
);

class RecipeBox extends React.Component{

  constructor(props){
    super(props);
    
    //this.recipeName = React.createRef();
    //this.recipeIngredients = React.createRef();    
    
    this.state = {
      recipes:
        [{
          name: "Pumpkin Pie",
          ingredients: ["Pumpkin Puree","Sweetened Condensed Milk","Eggs","Pumpkin Pie Spice","Pie Crust"]
        },
        {
          name: "Spaghetti",
          ingredients: ["Noodles","Tomato Sauce","(Optional) Meatballs"]
        },
        {
          name: "Onion Pie",
          ingredients: ["Onion","Pie Crust","Sounds Yummy right?"]
        }]
    };
    
    this.addRecipe = this.addRecipe.bind(this);
  }
  
  componentDidMount() {   
      //initialize all modals           
      $(document).ready(function() {
        
        $('.modal').modal();
      });
  }  
  
  addRecipe(event){
    //console.log({name: recipe_name.value, ingredients: ingredients.value.split(',')});
    const newItem = {name: recipe_name.value, ingredients: ingredients.value.split(',')};
    //console.log(newItem);
    const recipes = {...this.state.recipes, newItem};
    console.log(recipes);
    this.setState({
      recipes
    });
    
    console.log(this.state.recipes);
    
  }
  
  editRecipe(event){
    //console.log("Click!");
    
  }
  
  deleteRecipe(event){
    //console.log("Click!");
    
  }  
  
  render() {
    return(
      <div className="container">
        <h1 className="center-align blue-text text-darken-4">Recipes</h1>
        <div className="row">
          <Items recipes={this.state.recipes} />
        </div>
        <div className="row">
          <div className="col offset-s2 s8">
            <a data-target="modal1" className="waves-effect waves-light btn-large blue darken-4 modal-trigger" onClick={this.addRecipe}><i className="material-icons left">add</i>Add Recipe</a>  
          </div>
        </div>
        <Modal addRecipe={this.addRecipe} />
      </div>
    );
  }
}

ReactDOM.render(
  <RecipeBox />,
  document.getElementById('app')
);

  $(document).ready(function(){
    $('.collapsible').collapsible();
  });