import { Component, ElementRef, ViewChild } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';
import { Authentication } from './services/Authentication';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, CommonModule],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {

  @ViewChild('homeLink') homeLink!: ElementRef<HTMLAnchorElement>;
  @ViewChild('mistLink') mistLink!: ElementRef<HTMLAnchorElement>;
  @ViewChild('storeLink') storeLink!: ElementRef<HTMLAnchorElement>;
  @ViewChild('aboutLink') aboutLink!: ElementRef<HTMLAnchorElement>;

  constructor(public auth: Authentication, private router: Router){}

  ngAfterViewInit(){
    let ViewLinks = [ this.homeLink, this.mistLink, this.storeLink, this.aboutLink ];
    ViewLinks.forEach(link => {
      if (new URL(link.nativeElement.href).pathname === new URL(window.location.href).pathname){
        link.nativeElement.classList.add("active");
      }
    });
  }

}
