<template>
    <div class="recipe-page container p-4">
        <RecipeHeader :recipe="recipe" @favorite-updated="fetchRecipe(id)" :source="source_tag" />
        <hr class="border border-secondary my-4">
        <RecipeIngredients :ingredients="recipe.ingredients" />
        <hr class="border border-secondary my-4">
        <RecipeInstructions :instructions="recipe.instructions" />
        <hr class="border border-secondary my-4">
    </div>
</template>
  
<script>
import RecipeHeader from "@/components/RecipeHeader.vue";
import RecipeIngredients from "@/components/RecipeIngredients.vue";
import RecipeInstructions from "@/components/RecipeInstructions.vue";
import api from "@/api";
import { isUserLoggedIn } from "@/utils/token.js";

export default {
    data() {
        return {
            recipe: {
                id: 0,
                title: "",
                source_url: "",
                image_url: "",
                rating: {},
                difficulty: "",
                time: "",
                servings: "",
                ingredients: [],
                instructions: [],
            },
            source_tag: "recipe_detail"
        };
    },
    async mounted() {
        const id = this.$route.params.id;
        await this.fetchRecipe(id);
    },
    methods: {
        async fetchRecipe(id) {
            try {
                const response = await api.get(`/recipes/${id}/`);
                this.recipe = response.data;
            } catch (error) {
                console.error(error);
            }
        }
    },
    computed: {
        id() {
            return parseInt(this.$route.params.id);
        },
        isLoggedIn() {
            return isUserLoggedIn();
        },
    },
    components: {
        RecipeHeader,
        RecipeIngredients,
        RecipeInstructions
    },
};
</script>
  