import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
import { form, FormField, submit } from '@angular/forms/signals';
import { toSignal } from '@angular/core/rxjs-interop';
import { injectMutation } from '@tanstack/angular-query-experimental';
import { startWith, switchMap } from 'rxjs';
import { injectUIService } from '@/core/services/ui.service';
import { injectWebsocketService, WSEvents } from '@/core/services/websocket.service';
import { ButtonDirective } from '@/shared/ui/button.directive';
import { ModalComponent } from '@/shared/ui/modal/modal.component';
import { SurveyModalComponent } from '../survey-modal/survey-modal.component';
import { Survey } from '../survey.models';
import { injectSurveyService, SurveyService } from '../survey.service';

@Component({
	selector: 'app-ask-questions',
	templateUrl: './ask-questions.component.html',
	styleUrls: ['./ask-questions.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush,
	standalone: true,
	imports: [ModalComponent, SurveyModalComponent, FormField, ButtonDirective],
	providers: [SurveyService],
})
export class AskQuestionsComponent {
	private uiServ = injectUIService();
	private surveyServ = injectSurveyService();
	activityId = input.required<number>();
	selectedSurvey = signal<Survey | null>(null);
	openSurvey = computed(() => this.selectedSurvey() !== null);
	surveys$ = injectWebsocketService()
		.listen(WSEvents.SURVEY)
		.pipe(
			startWith(0),
			switchMap(() => this.surveyServ.getActiveSurveys())
		);
	surveys = toSignal(this.surveys$, { initialValue: [] as Survey[] });
	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.surveyServ.saveQuestion(this.activityId(), this.questionModel().question.trim());
		},
		onSuccess: () => {
			this.questionModel.set({ question: '' });
			this.uiServ.showToast('¡Tu pregunta ha sido enviada!');
		},
		onError: (error) => this.uiServ.showErrorAlert(error.message),
	}));

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