import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { QueryClient } from '@tanstack/angular-query-experimental';
import { startWith, switchMap } from 'rxjs';
import { injectAuthService } from '@/core/services/auth.service';
import { injectCatalogsService } from '@/core/services/catalogs.service';
import { injectWebsocketService, WSEvents } from '@/core/services/websocket.service';
import { CountdownComponent } from '@/features/countdown/countdown.component';
import { ScheduleComponent } from '@/features/schedule/schedule.component';
import { SpeakersComponent } from '@/features/speaker/speakers/speakers.component';
import { MainLayoutComponent } from '@/shared/layout/main-layout/main-layout.component';
import { WithBackgroundImageDirective } from '@/shared/ui/with-background-image.directive';

@Component({
	selector: 'app-home',
	templateUrl: './home.component.html',
	styleUrls: ['./home.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush,
	standalone: true,
	imports: [
		AsyncPipe,
		WithBackgroundImageDirective,
		MainLayoutComponent,
		CountdownComponent,
		ScheduleComponent,
		SpeakersComponent,
	],
})
export default class HomeComponent {
	private queryClient = inject(QueryClient);
	private catalogServ = injectCatalogsService();
	auth = injectAuthService();
	countdown$ = injectWebsocketService()
		.listen(WSEvents.COUNTDOWN, ['countdown'])
		.pipe(
			startWith(true),
			switchMap(() => this.catalogServ.getCountdown())
		);
	refetchCountdown() {
		return this.queryClient.invalidateQueries({ queryKey: ['countdown'] });
	}
}