import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RecipeService } from '../../shared/services/RecipeService';
import { RecipePageContent } from './recipe-page-content/recipe-page-content';
import { injectQuery } from '@tanstack/angular-query-experimental';

@Component({
    selector: 'app-recipe-page',
    imports: [RecipePageContent],
    templateUrl: './recipe-page.html',
    styleUrl: './recipe-page.css',
})
export class RecipePage {
    private recipeService = inject(RecipeService);
    private route = inject(ActivatedRoute);
    private username = this.route.snapshot.paramMap.get('username') as string;
    private slug = this.route.snapshot.paramMap.get('slug') as string;

    protected recipeView = injectQuery(() => ({
        queryKey: ['recipe', this.username, this.slug],
        queryFn: () => this.recipeService.getRecipeView(this.username, this.slug),
    }));
}