import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideLogIn, lucideUserPlus } from '@ng-icons/lucide';
import { selectCurrentUser } from '../../../../store/users/users.selectors';
import { ProfileCardService } from '../../../../shared/components/profile-card/profile-card.service';
import { UserAvatarComponent } from '../../../../shared';

@Component({
  selector: 'app-user-bar',
  standalone: true,
  imports: [
    CommonModule,
    NgIcon,
    UserAvatarComponent
  ],
  viewProviders: [
    provideIcons({
      lucideLogIn,
      lucideUserPlus })
  ],
  templateUrl: './user-bar.component.html'
})
/**
 * Compact user status bar showing the current user with login/register navigation links.
 */
export class UserBarComponent {
  store = inject(Store);
  user = this.store.selectSignal(selectCurrentUser);

  private router = inject(Router);
  private profileCard = inject(ProfileCardService);

  toggleProfileCard(origin: HTMLElement): void {
    const user = this.user();

    if (!user)
      return;

    this.profileCard.open(origin, user, { placement: 'above', editable: true });
  }

  /** Navigate to the specified authentication page. */
  goto(path: 'login' | 'register') {
    this.router.navigate([`/${path}`]);
  }
}
