import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
import { AvatarModule } from 'primeng/avatar';
import { ButtonModule } from 'primeng/button';

export interface TopbarLanguageOption {
  code: string;
  label: string;
  flag: string;
}

@Component({
  selector: 'app-topbar',
  standalone: true,
  imports: [CommonModule, FormsModule, TranslateModule, ButtonModule, AvatarModule],
  templateUrl: './app-topbar.component.html'
})
export class AppTopbarComponent {
  @Input() pageTitle = 'dashboard.title';
  @Input() username = 'admin';
  @Input() lang = 'pl';
  @Input() themeMode: 'light' | 'dark' = 'light';
  @Input() languages: TopbarLanguageOption[] = [];
  @Output() menuClick = new EventEmitter<void>();
  @Output() themeClick = new EventEmitter<void>();
  @Output() languageChange = new EventEmitter<string>();
  @Output() logoutClick = new EventEmitter<void>();

  get userInitials(): string {
    return this.username.slice(0, 2).toUpperCase();
  }

  trackByLanguageCode(_: number, option: TopbarLanguageOption) {
    return option.code;
  }

  onLanguageSelect(value: string) {
    this.languageChange.emit(value);
  }
}