import React, { Component } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import actions from '../actions/index.js';
import { createRecipe, editRecipe } from '../utils/utils.js';
import '../scss/_createRecipe.scss';

class CreateRecipe extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { recipe, addField, removeField, updateRecipe, submitRecipe } = this.props;
    return (
      <div>
        <div className="edit-recipe-content">
          <form>
            <h3> Recipe Title: </h3>
            <input
              type="text"
              name="title"
              value={recipe.title}
              onChange={(e) => updateRecipe(e)}
            /><br />
            <h3> Images: </h3>
            <br />
            yield:
            <input
              type="text"
              name="yield"
              value={recipe.yield}
              onChange={(e) => updateRecipe(e)}
            /><br />
            yield_unit:
            <input
              type="text"
              name="yield_unit"
              value={recipe.yield_unit}
              onChange={(e) => updateRecipe(e)}
            /><br />


            <h3> Ingredients: </h3>
            <h3> {recipe.ingredients.map((i, key) =>
              <input
                type="text"
                value={i}
                data-index={key}
                onChange={(e) => updateRecipe(e, recipe.ingredients)}
              >
              </input>)}
            </h3>
            <button
              onClick={(e) => {
                e.stopPropagation();
                e.preventDefault();
                addField('ingredients');
              }}
            > add ingredient </button>
            <button
              onClick={(e) => {
                e.stopPropagation();
                e.preventDefault();
                removeField('ingredients');
              }}
            > remove ingredient </button> <br />


            <h3> Prep Steps: </h3>
            <h3> {recipe.prep_steps.map((i, key) =>
              <input
                type="text"
                value={i}
                data-index={key}
                onChange={(e) => updateRecipe(e, recipe.prep_steps)}
              >
              </input>)}
            </h3>
            <button
              onClick={(e) => {
                e.stopPropagation();
                e.preventDefault();
                addField('prep_steps');
              }}
            > add Step </button>
            <button
              onClick={(e) => {
                e.stopPropagation();
                e.preventDefault();
                removeField('prep_steps');
              }}
            > remove Step </button>
            <br />
            Prep Time:
            <input
              type="text"
              name="prep_time"
              value={recipe.prep_time}
              onChange={(e) => updateRecipe(e)}
            /><br />


            <h3> Cook Steps: </h3>
            <h3> {recipe.cook_steps.map((i, key) =>
              <input
                type="text"
                value={i}
                data-index={key}
                onChange={(e) => updateRecipe(e, recipe.cook_steps)}
              >
              </input>)}
            </h3>
            <button
              onClick={(e) => {
                e.stopPropagation();
                e.preventDefault();
                addField('cook_steps');
              }}
            > add Step </button>
            <button
              onClick={(e) => {
                e.stopPropagation();
                e.preventDefault();
                removeField('cook_steps');
              }}
            > remove Step </button>
            <br />
            Cook Time:
            <input
              type="text"
              name="cook_time"
              value={recipe.cook_steps}
              onChange={(e) => updateRecipe(e)}
            /><br />


            <h3> Finish Steps: </h3>
            <h3> {recipe.finish_steps.map((i, key) =>
              <input
                type="text"
                value={i}
                data-index={key}
                onChange={
                  (e) => updateRecipe(e, recipe.finish_steps)}
              >
              </input>
            )}
            </h3>
            <button
              onClick={(e) => {
                e.stopPropagation();
                e.preventDefault();
                addField('finish_steps');
              }}
            > add Step </button>
            <button
              onClick={(e) => {
                e.stopPropagation();
                e.preventDefault();
                removeField('finish_steps');
              }}
            > remove Step </button>
            <br />

            <h3> Tags: </h3>
            <h3> {recipe.tags.map((i, key) =>
              <input
                type="text"
                value={i}
                data-index={key}
                onChange={(e) => updateRecipe(e, recipe.tags)}
              >
              </input>)}
            </h3>
            <button
              onClick={(e) => {
                e.stopPropagation();
                e.preventDefault();
                addField('tags');
              }}
            > add Tag </button>
            <button
              onClick={(e) => {
                e.stopPropagation();
                e.preventDefault();
                removeField('tags');
              }}
            > remove Tag </button>
            <br />

            <button 
              onClick={(e) => {
                e.stopPropagation();
                e.preventDefault();
                submitRecipe(recipe);
              }}
            > Submit </button>

          </form>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return { recipe: state.recipe };
};

const mapDispatchToProps = (dispatch) => {
  const updateRecipe = (event, list) => {
    let inputChange = {};
    // if a list is defined, we must modify an array position, not just reassign props.
    if (list) {
      const index = event.target.dataset.index;
      inputChange = list;
      inputChange[index] = event.target.value;
    } else {
      inputChange[event.target.name] = event.target.value;
    }
    dispatch(actions.editRecipe(inputChange));
  };
  const addField = (property) => {
    // modify the recipe state to render a new field.
    dispatch(actions.addField(property));
  };
  const removeField = (property) => {
    // modify the recipe state to render a new field.
    dispatch(actions.removeField(property));
  };
  // will add or submit edits to a given recipe
  const submitRecipe = (recipe) => {
    if (recipe.id) { // if there is a recipe ID currently assigned, send update to an existing recipe
      editRecipe(recipe, (updatedRecipe) => {
        dispatch(actions.setRecipe(updatedRecipe));
        dispatch(push(`/recipe/${updatedRecipe.id}`));
      });
    } else { // else create a new recipe
      createRecipe(recipe, (submittedRecipe) => {
        dispatch(actions.setRecipe(submittedRecipe));
        dispatch(push(`/recipe/${submittedRecipe.id}`));
      });
    }
  };
  return {
    updateRecipe,
    addField,
    removeField,
    submitRecipe,
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(CreateRecipe);
@@ -369,16 +369,22 @@
  const %7B
+ user,
  recipe,
@@ -5697,16 +5697,25 @@
 e(recipe
+, user.id
 );%0A     
@@ -5865,16 +5865,20 @@
 return %7B
+%0A   
  recipe:
@@ -5890,16 +5890,41 @@
 e.recipe
+,%0A    user: state.user,%0A 
  %7D;%0A%7D;%0A%0A
@@ -6741,24 +6741,32 @@
 pe = (recipe
+, userID
 ) =%3E %7B%0A    i
@@ -7077,21 +7077,125 @@
    c
-reateRecipe(r
+onst newRecipe = Object.assign(%7B%7D, recipe, %7B author: userID %7D);%0A      console.log(newRecipe);%0A      createRecipe(newR
 ecip

add current userid to author field of newly created recipes