<template>
  <div class="card ingredient-list">
    <div class="card-content">
      <h2 class="subtitle">Ingredients</h2>
      <ul>
        <component :is="editMode" v-for="ingredient in ingredientList" :ingredient="ingredient" :key="ingredient.id"></component>
      </ul>
      <span @click="changeMode">Click to Edit</span>
    </div>
  </div><!-- ingredient list card -->
</template>

<script>
import Ingredient from '@/components/Ingredient'
import IngredientEditMode from '@/components/IngredientEditMode'

export default {
  props: ['ingredientList'],
  components: [ Ingredient, IngredientEditMode ],
  data () {
    return {
      editMode: Ingredient
    }
  },
  methods: {
    changeMode () {
      if (this.editMode === Ingredient) {
        this.editMode === IngredientEditMode
      } else {
        this.editMode === Ingredient
      }
    }
  }
}
</script>

<style>
</style>