import { Component, inject, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { injectQuery } from '@tanstack/angular-query-experimental';
import { RecipeService } from '../service/recipe.service';
import { RecipeCardGrid } from '../recipe-card-grid/recipe-card-grid';

@Component({
    selector: 'app-recipes-search-page',
    imports: [ReactiveFormsModule, RecipeCardGrid],
    templateUrl: './recipes-search-page.html',
    styleUrl: './recipes-search-page.css',
})
export class RecipesSearchPage {
    private readonly recipeService = inject(RecipeService);

    protected readonly searchRecipesForm = new FormGroup({
        prompt: new FormControl('', [Validators.required]),
    });

    protected readonly givenPrompt = signal<null | string>(null);

    protected readonly resultsQuery = injectQuery(() => ({
        queryFn: () => this.recipeService.aiSearch(this.givenPrompt()!),
        queryKey: ['recipes-search', this.givenPrompt()],
        enabled: () => !!this.givenPrompt(),
    }));

    protected onPromptSubmit() {
        if (this.searchRecipesForm.value.prompt) {
            this.givenPrompt.set(this.searchRecipesForm.value.prompt);
        }
    }
}