import { Component, computed, inject, input } from '@angular/core';
import { Recipe } from '../../../models/Recipe.model';
import { RouterLink } from '@angular/router';
import { injectQuery } from '@tanstack/angular-query-experimental';
import { ImageService } from '../../../services/ImageService';
import { faGlobe, faLock, faStar, faUser } from '@fortawesome/free-solid-svg-icons';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';

@Component({
    selector: 'app-recipe-card',
    imports: [RouterLink, FaIconComponent],
    templateUrl: './recipe-card.html',
    styleUrl: './recipe-card.css',
})
export class RecipeCard {
    public recipe = input.required<Recipe>();

    protected readonly recipePageLink = computed(() => {
        const recipe = this.recipe();
        return ['/recipes', recipe.owner.username, recipe.slug];
    });

    protected readonly faGlobe = faGlobe;
    protected readonly faLock = faLock;
    protected readonly faUser = faUser;
    protected readonly faStar = faStar;

    private readonly imageService = inject(ImageService);

    protected readonly mainImage = injectQuery(() => {
        const recipe = this.recipe();
        return {
            queryKey: ['images', recipe.mainImage.owner.username, recipe.mainImage.filename],
            queryFn: () => this.imageService.getImage(recipe.mainImage.url),
        };
    });
}