import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { combineLatest, map, startWith, switchMap } from 'rxjs';
import { UnixTimePipe } from '@/core/pipes/unix-time.pipe';
import { injectWebsocketService, WSEvents } from '@/core/services/websocket.service';
import { LiveQuestion } from '../questions.models';
import { injectQuestionsService, QuestionsService } from '../questions.service';

@Component({
	selector: 'app-watch-questions',
	templateUrl: './watch-questions.component.html',
	styleUrls: ['./watch-questions.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush,
	standalone: true,
	imports: [UnixTimePipe],
	providers: [QuestionsService],
})
export class WatchQuestionsComponent {
	private wsServ = injectWebsocketService();
	private questionsServ = injectQuestionsService();
	activityId = input(1);
	questions$ = combineLatest([
		toObservable(this.activityId),
		this.wsServ
			.listen(WSEvents.QUESTIONS, ['schedule', 'question', this.activityId().toString()])
			.pipe(startWith(true)),
	]).pipe(
		switchMap(([id]) => this.questionsServ.getLiveQuestions(id)),
		map(({ data }) => data.reverse())
	);
	questions = toSignal(this.questions$, { initialValue: [] as LiveQuestion[] });
}