import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { MatMenuModule } from '@angular/material/menu';
import { map } from 'rxjs';
import { AuthService } from '../ms-authentication/auth.service';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'dks-avatar',
    template: `<div
      class="flex items-center justify-center rounded-full h-10 w-10 cursor-pointer transition ease-in-out hover:shadow-md hover:scale-105 duration-200 "
      [matMenuTriggerFor]="menu"
      style="background-color: var(--mat-sys-primary-container); color: var(--mat-sys-on-primary-container)"
    >
      {{ userInitials$ | async }}
    </div>
    <mat-menu #menu="matMenu">
      <button mat-menu-item (click)="logout()">Logout</button>
    </mat-menu>`,
    imports: [AsyncPipe, MatMenuModule]
})
export class AvatarComponent {
  private authService = inject(AuthService);

  userInitials$ = this.authService.activeAccount$.pipe(
    map((account) =>
      account?.name
        ?.split(' ')
        .slice(0, 2)
        .map((word) => word.at(0))
        .join('')
    )
  );

  logout() {
    this.authService.logout();
  }
}
