import { Component, computed, effect, inject } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
import { ModalComponent } from './components/modal/modal.component';
import { LoginComponent } from './components/login/login.component';
import { AuthService } from './shared/services/auth.service';
import { NgIf } from '@angular/common';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterLink, ModalComponent, LoginComponent, NgIf],
  templateUrl: './app.component.html',
})
export class AppComponent {
  private auth = inject(AuthService);
  loginOpen: boolean = false;
  loggedIn = computed(() => this.auth.jwt() !== null);

  constructor() {
    effect(() => {
      if (this.auth.jwt()) {
        this.loginOpen = false;
      }
    });
  }

  toggleLogin() {
    this.loginOpen = !this.loginOpen;
  }
  logOut() {
    this.auth.jwt.set(null);
  }
}