import { Component, computed, input } from '@angular/core';
import type { UploadStatus } from '@shared/upload/upload.machine';

interface Glyph {
  char: string;
  label: string;
  color: string;
}

/** Atom: a small status glyph for one upload. Pure UI — glyph, colour and a11y
    label derive purely from the status type. */
@Component({
  selector: 'app-upload-status-icon',
  styles: [
    `
      .glyph {
        font-weight: var(--rhc-text-font-weight-semi-bold);
      }
    `,
  ],
  template: `
    @if (glyph()) {
      <span
        class="glyph"
        [style.color]="glyph()!.color"
        [attr.aria-label]="glyph()!.label"
        role="img"
      >
        {{ glyph()!.char }}
      </span>
    }
  `,
})
export class UploadStatusIconComponent {
  status = input.required<UploadStatus['type']>();

  protected readonly glyph = computed<Glyph | null>(() => {
    switch (this.status()) {
      case 'queued':
        return {
          char: '…',
          label: $localize`:@@upload.status.queued:In wachtrij`,
          color: 'var(--rhc-color-foreground-subtle)',
        };
      case 'uploading':
        return {
          char: '↑',
          label: $localize`:@@upload.status.uploading:Bezig met uploaden`,
          color: 'var(--rhc-color-lintblauw-600)',
        };
      case 'complete':
        return {
          char: '✓',
          label: $localize`:@@upload.status.complete:Geüpload`,
          color: 'var(--rhc-color-groen-500)',
        };
      case 'failed':
        return {
          char: '✕',
          label: $localize`:@@upload.status.failed:Mislukt`,
          color: 'var(--rhc-color-rood-500)',
        };
      case 'deleting':
        return {
          char: '⟳',
          label: $localize`:@@upload.status.deleting:Bezig met verwijderen`,
          color: 'var(--rhc-color-foreground-subtle)',
        };
      case 'idle':
      case 'deleted':
        return null;
    }
  });
}
