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

@Component({
  selector: 'app-user-avatar',
  standalone: true,
  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' | '2xl'>('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';
      case '2xl':
        return 'w-6 h-6';
    }
  });

  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';
      case '2xl':
        return 'w-32 h-32';
    }
  }

  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;
      case '2xl':
        return 128;
    }
  }

  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';
      case '2xl':
        return 'text-4xl font-semibold';
    }
  }
}
