import { Component, computed, inject, input } from '@angular/core';
import { RecipeView } from '../../../shared/models/Recipe.model';
import { injectMutation, injectQuery } from '@tanstack/angular-query-experimental';
import { ImageService } from '../../../shared/services/ImageService';
import { faGlobe, faLock, faStar, faUser } from '@fortawesome/free-solid-svg-icons';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { RecipeService } from '../../../shared/services/RecipeService';
import { AuthService } from '../../../shared/services/AuthService';
import { RecipeCommentsList } from '../../../shared/components/recipe-comments-list/recipe-comments-list';
import { MatButton } from '@angular/material/button';

@Component({
    selector: 'app-recipe-page-content',
    imports: [FaIconComponent, RecipeCommentsList, MatButton],
    templateUrl: './recipe-page-content.html',
    styleUrl: './recipe-page-content.css',
})
export class RecipePageContent {
    public recipeView = input.required<RecipeView>();

    private readonly imageService = inject(ImageService);
    private readonly recipeService = inject(RecipeService);
    private readonly authService = inject(AuthService);

    protected readonly isLoggedIn = computed(() => !!this.authService.accessToken());

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

    protected readonly starMutation = injectMutation(() => ({
        mutationFn: () => this.recipeService.toggleStar(this.recipeView()),
    }));

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