import { NgOptimizedImage } from '@angular/common';
import {
  Component,
  computed,
  input
} from '@angular/core';
import { UserStatus } from '../../../shared-kernel';

@Component({
  selector: 'app-user-avatar',
  standalone: true,
  imports: [NgOptimizedImage],
  templateUrl: './user-avatar.component.html',
  host: {
    style: 'display: contents;'
  }
})
export class UserAvatarComponent {
  name = input.required<string>();
  avatarUrl = input<string | undefined | null>();
  size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('sm');
  ringClass = input<string>('');
  status = input<UserStatus | undefined>();
  showStatusBadge = input(false);

  statusBadgeColor = computed(() => {
    switch (this.status()) {
      case 'online': return 'bg-green-500';
      case 'away': return 'bg-yellow-500';
      case 'busy': return 'bg-red-500';
      case 'offline': return 'bg-gray-500';
      case 'disconnected': return 'bg-gray-500';
      default: return 'bg-gray-500';
    }
  });

  statusBadgeSizeClass = computed(() => {
    switch (this.size()) {
      case 'xs': return 'w-2 h-2';
      case 'sm': return 'w-3 h-3';
      case 'md': return 'w-3.5 h-3.5';
      case 'lg': return 'w-4 h-4';
      case 'xl': return 'w-4.5 h-4.5';
    }
  });

  initial(): string {
    return this.name()?.charAt(0)
      ?.toUpperCase() ?? '?';
  }

  sizeClasses(): string {
    switch (this.size()) {
      case 'xs': return 'w-7 h-7';
      case 'sm': return 'w-8 h-8';
      case 'md': return 'w-10 h-10';
      case 'lg': return 'w-12 h-12';
      case 'xl': return 'w-16 h-16';
    }
  }

  sizePx(): number {
    switch (this.size()) {
      case 'xs': return 28;
      case 'sm': return 32;
      case 'md': return 40;
      case 'lg': return 48;
      case 'xl': return 64;
    }
  }

  textClass(): string {
    switch (this.size()) {
      case 'xs': return 'text-xs';
      case 'sm': return 'text-sm';
      case 'md': return 'text-base font-semibold';
      case 'lg': return 'text-lg font-semibold';
      case 'xl': return 'text-xl font-semibold';
    }
  }
}