<script>

import {API} from "@/util/API";

export default {
    name: "RecipeView",
    data() {
        return {
            recipe: {},
            id: this.$route.params.id,
            title: "",
            description: "",
            time: "",
            ingredients: [],
            instructions: "",
        }
    },
    methods: {
        async loadData() {
            await API.getRecipe(this.id)
                .then((recipe) => {
                  this.title = recipe.title;
                  this.description = recipe.description;
                  this.time = recipe.time;
                  this.ingredients = recipe.ingredient;
                  this.instructions = recipe.instructions;
                })
        },
        addIngredientsShoppingList() {
            //TODO add ingredients to shopping list
        },
        removeIngredientsFromFridge() {
            //TODO remove used ingredients from fridge
        }
    },
    async mounted() {
        await this.loadData();
    }
}

</script>

<template>
  <main>
      <h1>{{this.title}}</h1><br>
      <p>{{this.description}}</p><br>
      <div class="ingredients">
          <h2>Ingredienser</h2>
          <ul>
              <li v-for="ingredient in this.ingredients">{{ ingredient.item.name }} {{ ingredient.amount.quantity }} {{ingredient.amount.unit}}</li>
          </ul>
          <button @click="addIngredientsShoppingList">Legg til ingrediensene i handlekurven</button>
      </div>
      <div class="instructions">
          <h2>Instruksjoner</h2>
          {{this.instructions}}
      </div>
      <button @click="removeIngredientsFromFridge">Fjern varene fra kjøleskapet</button>

  </main>

</template>

<style scoped lang="scss">
@media(min-width: base.$desktop-min) {
  main {
    padding-top: 45px !important;
  }
}

main {
  padding: 20px 10px;
  .ingredients {
    margin-bottom: 20px;
  }
    button {
        min-height: 40px;
        border-radius: 0;
        border: 1px solid;
        cursor: pointer;
        padding: 5px;
    }
}


</style>