import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { injectAuthService } from '@/core/services/auth.service';
<% if (hasNotifications) { %>import { injectNotificationsService } from '@/core/services/notifications.service';
<% } %><% if (hasPwa) { %>import { PwaService } from '@/core/services/pwa.service';
<% } %>import { ButtonDirective } from '../../ui/button.directive';

interface NavPage {
	label: string;
	route: string;
	showBadge?: boolean;
}

@Component({
	selector: 'app-navbar',
	templateUrl: './navbar.component.html',
	styleUrls: ['./navbar.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush,
	standalone: true,
	imports: [RouterLink, RouterLinkActive, ButtonDirective],
})
export class NavbarComponent {
	private authServ = injectAuthService();
<% if (hasNotifications) { %>	private notificationsServ = injectNotificationsService();
<% } %><% if (hasPwa) { %>	private pwaService = inject(PwaService);
<% } %>
	showNavbar = signal(false);
	showInstallButton = <% if (hasPwa) { %>this.pwaService.showInstallButton<% } else { %>signal(false)<% } %>;
	hasUnread = <% if (hasNotifications) { %>computed(() => this.notificationsServ.hasUnread())<% } else { %>signal(false)<% } %>;
	unreadCount = <% if (hasNotifications) { %>computed(() => this.notificationsServ.unreadCount())<% } else { %>signal(0)<% } %>;
	pages: NavPage[] = [
		{ label: 'Home', route: '/app' },
		{ label: 'Page1', route: '/app/page1' },
		{ label: 'Page2', route: '/app/page2' },
		{ label: 'Page3', route: '/app/page3' },
<% if (hasNotifications) { %>		{ label: 'Notificaciones', route: '/app/notifications', showBadge: true },
<% } %>	];

	toggleNavbar(show: boolean) {
		this.showNavbar.set(show);
	}

	installPwa() {
<% if (hasPwa) { %>		this.toggleNavbar(false);
		this.pwaService.triggerInstall();
<% } else { %>		return;
<% } %>	}

	logout() {
		this.toggleNavbar(false);
		return this.authServ.logout();
	}
}