import {Component, inject, OnDestroy} from '@angular/core';
import {Router, RouterOutlet} from '@angular/router';
import {MatToolbar} from '@angular/material/toolbar';
import {MatButton, MatIconButton} from '@angular/material/button';
import {MatIcon} from '@angular/material/icon';
import {LoginService} from './services/login/login.service';
import {Subscription} from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    MatToolbar,
    MatIconButton,
    MatIcon,
    MatButton
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnDestroy {

  private readonly router: Router = inject(Router);
  protected readonly loginService: LoginService = inject(LoginService);

  private logoutSubscription: Subscription | null = null;

  ngOnDestroy() {
    this.logoutSubscription?.unsubscribe();
  }

  logout() {
    this.logoutSubscription = this.loginService.logout().subscribe({
      next: () => {
        this.navigateToLogin();
      },
      error: (error) => {
        this.navigateToLogin()
      }
    });
  }

  navigateToLogin() {
    this.router.navigate(['/login']).then();
  }

  navigateHome() {
    this.router.navigate(['/home']).then();
  }
}
