import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
import { filter, map } from 'rxjs/operators';
import { injectAnalyticsService } from '@/core/services/analytics.service';
import { injectUIService } from '@/core/services/ui.service';
import { injectWebsocketService, WSEvents } from '@/core/services/websocket.service';

@Component({
	selector: 'app-root',
	template: `<router-outlet />`,
	styles: [],
	changeDetection: ChangeDetectionStrategy.OnPush,
	imports: [RouterOutlet],
	standalone: true,
})
export class AppComponent implements OnInit {
	private router = inject(Router);
	private analyticsServ = injectAnalyticsService();
	private websocketServ = injectWebsocketService();
	private uiServ = injectUIService();
	ngOnInit() {
		this.analyticsServ.appendAnalyticsScript();
		this.routerNavigationEnd().subscribe((item: NavigationEnd) => {
			this.analyticsServ.setGtagUrl(item.url);
		});
		this.listenWebsockets();
	}
	private listenWebsockets() {
		this.websocketServ.listen(WSEvents.REFRESH).subscribe(() => window.location.reload());
		this.websocketServ
			.listen<{ message: string }>(WSEvents.MESSAGE)
			.subscribe((data) => data && this.uiServ.showInfoAlert(data.message));
	}
	private routerNavigationEnd() {
		return this.router.events.pipe(
			filter((item) => item instanceof NavigationEnd),
			map((item) => item as NavigationEnd)
		);
	}
}