<script setup>
import FavoriteButton from './FavoriteButton.vue';
</script>

<template>
    <div class="card mb-4 shadow-sm" style="width: 19rem; cursor: pointer;" @click="redirectToRecipe(recipe.id)">
        <div style="height: 15rem; overflow: hidden;" class="mt-3 p-2">
            <img :src="recipe.image_url" alt="Recipe Image" class="rounded"
                style="width: 100%; height: 100%; object-fit: cover;">
        </div>
        <div class="card-body p-2 d-flex flex-column">
            <h5 class="card-title fw-normal pb-1" :style="{ textAlign: 'justify' }">
                {{ recipe.title }}
            </h5>
            <div class="d-flex flex-column position-absolute" style="top:1.9rem;right:1.6rem">
                <FavoriteButton v-if="isLoggedIn" :recipeId="recipe.id" :isFavorited="recipe.is_favorited" @click.stop
                    :source="source" @favorite-updated="$emit('favorite-updated')" />
            </div>
            <div class="mt-auto mb-3">
                <!-- Ingredients percentage -->
                <div class="ingredient-percentage" v-if="isLoggedIn">
                    <span>Completeness percentage</span>
                    <div class="progress border border-secondary w-100 my-1" style="height: 20px">
                        <div class="progress-bar" role="progressbar"
                            :style="{ width: `${recipe.completeness_percentage}%` }"
                            :aria-valuenow="recipe.completeness_percentage" aria-valuemin="0" aria-valuemax="100">
                            {{ recipe.completeness_percentage }}%
                        </div>
                    </div>
                </div>
                <div class="similarity mt-2" v-if="isLoggedIn && recipe.similarity !== 0">
                    <span>Similarity percentage</span>
                    <div class="progress border border-secondary w-100 my-1" style="height: 20px">
                        <div class="progress-bar" role="progressbar" :style="{ width: `${recipe.similarity}%` }"
                            :aria-valuenow="recipe.similarity" aria-valuemin="0" aria-valuemax="100">
                            {{ recipe.similarity }}%
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

export default {
    props: {
        recipe: {
            type: Object,
            required: true,
        },
        source: {
            type: String
        },
    },
    computed: {
        isLoggedIn() {
            return isUserLoggedIn();
        },
    },
    methods: {
        async redirectToRecipe(id) {
            try {
                const favoriteData = {
                    source: this.source,
                }

                if (this.isLoggedIn) {
                    await api.post(`/profiles/history/${id}/`, favoriteData);
                }
                this.$router.push(`/recipe/${id}`);
            } catch (error) {
                console.error(error);
            }
        },
    },
    components: {
        FavoriteButton
    }
};
</script>
