import { ChangeDetectionStrategy, Component, computed, output, signal } from '@angular/core';
import { form, FormField, submit } from '@angular/forms/signals';
import { injectMutation } from '@tanstack/angular-query-experimental';
import { injectUIService } from '@/core/services/ui.service';
import { ButtonDirective } from '@/shared/ui/button.directive';
import { injectQuestionsService, QuestionsService } from '../questions.service';

@Component({
	selector: 'app-ask-questions',
	templateUrl: './ask-questions.component.html',
	styleUrls: ['./ask-questions.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush,
	standalone: true,
	imports: [FormField, ButtonDirective],
	providers: [QuestionsService],
})
export class AskQuestionsComponent {
	private uiServ = injectUIService();
	private questionServ = injectQuestionsService();
	questionSubmitted = output();
	questionModel = signal({ question: '' });
	questionForm = form(this.questionModel);
	noQuestion = computed(() => this.questionModel().question.trim().length === 0);
	save = injectMutation(() => ({
		mutationFn: async (_: void) => {
			if (this.noQuestion()) return;
			return this.questionServ.saveQuestion(this.questionModel().question.trim());
		},
		onSuccess: () => {
			this.questionModel.set({ question: '' });
			this.uiServ.showToast('¡Tu pregunta ha sido enviada!');
			this.questionSubmitted.emit();
		},
		onError: (error) => this.uiServ.showErrorAlert(error.message),
	}));

	onSubmit(event: Event) {
		event.preventDefault();
		submit(this.questionForm, {
			action: async () => this.save.mutate(),
		});
	}
}