<script setup>
import MenuCard from '../components/MenuCard.vue';
</script>

<template>
    <div class="container">
        <div class="recommendations my-4" v-if="isLoggedIn && cf_recipes.length > 0">
            <h2 class="text-center mb-2 fw-bolder">Recipes For You</h2>
            <div class="row row-cols-3 py-3 justify-content-evenly">
                <MenuCard v-for="recipe in cf_recipes" :key="recipe.id" :recipe="recipe" :source="source_tags[2]"
                    @favorite-updated="fetchUpdatedRecipesAfterFavorite" />
            </div>
        </div>
        <hr class="border border-secondary mt-2 mb-3" v-if="isLoggedIn && cf_recipes.length > 0">
        <div class="recommendations my-4">
            <h2 class="text-center mb-2 fw-bolder">Most Favorited</h2>
            <div class="row row-cols-3 py-3 justify-content-evenly">
                <MenuCard v-for="recipe in favorite_recipes" :key="recipe.id" :recipe="recipe" :source="source_tags[1]"
                    @favorite-updated="fetchUpdatedRecipesAfterFavorite" />
            </div>
        </div>
        <hr class="border border-secondary mt-2 mb-3">
        <div class="recommendations my-4">
            <h2 class="text-center mb-2 fw-bolder">Most Views</h2>
            <div class="row row-cols-3 py-3 justify-content-evenly">
                <MenuCard v-for="recipe in most_viewed_recipes" :key="recipe.id" :recipe="recipe" :source="source_tags[0]"
                    @favorite-updated="fetchUpdatedRecipesAfterFavorite" />
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api";
import { isUserLoggedIn } from "@/utils/token.js";

export default {
    data() {
        return {
            favorite_recipes: [],
            most_viewed_recipes: [],
            cf_recipes: [],
            source_tags: ['favorite_home', 'most_viewed_home', 'for_you_home']
        };
    },
    mounted() {
        this.fetchFavoriteRecipes();
        this.fetchMostViewedRecipes();
        if (isUserLoggedIn()) {
            this.fetchRecommendationRecipes();
        }
    },
    computed: {
        isLoggedIn() {
            return isUserLoggedIn();
        },
    },
    methods: {
        async fetchUpdatedRecipesAfterFavorite() {
            this.fetchFavoriteRecipes();
            this.fetchMostViewedRecipes();
            if (isUserLoggedIn()) {
                this.fetchRecommendationRecipes();
            }
        },
        async fetchFavoriteRecipes() {
            try {
                const response = await api.get('/profiles/favorited_recommendations/');
                this.favorite_recipes = response.data;
            } catch (error) {
                console.error(error);
            }
        },
        async fetchMostViewedRecipes() {
            try {
                const response = await api.get('/profiles/most_viewed_recommendations/');
                this.most_viewed_recipes = response.data;
            } catch (error) {
                console.error(error);
            }
        },
        async fetchRecommendationRecipes() {
            try {
                const response = await api.get('/profiles/cf_recommendations/');
                this.cf_recipes = response.data;
            } catch (error) {
                console.error(error);
            }
        },
    },
    components: {
        MenuCard,
    },
};
</script>
