import { ChangeDetectionStrategy, Component } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { RouterLink } from '@angular/router';
import { inject } from '@angular/core';
import { QueryClient } from '@tanstack/angular-query-experimental';
import { startWith, switchMap } from 'rxjs';
import { EventDatesPipe } from '@/core/pipes/event-dates.pipe';
import { injectCatalogsService } from '@/core/services/catalogs.service';
import { injectWebsocketService, WSEvents } from '@/core/services/websocket.service';
import { CountdownComponent } from '@/features/countdown/countdown.component';
import { injectEventDates } from '@/features/schedule/schedule.providers';
import { SpeakersComponent } from '@/features/speaker/speakers/speakers.component';
import { MainLayoutComponent } from '@/shared/layout/main-layout/main-layout.component';
import { ScrollBtnComponent } from '@/shared/layout/scroll-btn/scroll-btn.component';
import { WithBackgroundImageDirective } from '@/shared/ui/with-background-image.directive';

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