import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { initials } from './copy';

/** Overlapping initials (members of a project, people on a ticket). */
@Component({
  selector: 'ts-avatars',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (name of names().slice(0, max()); track $index) {
      <span class="ts-avatar" [attr.title]="name">{{ initialsOf(name) }}</span>
    }
    @if (names().length > max()) {
      <span class="ts-avatar ts-avatar--more"
        >+{{ names().length - max() }}</span
      >
    }
  `,
  styles: `
    :host {
      display: inline-flex;
      align-items: center;
      padding-left: 0.375rem;
    }
    .ts-avatar {
      display: inline-grid;
      place-items: center;
      width: var(--ts-avatar-size, 1.75rem);
      height: var(--ts-avatar-size, 1.75rem);
      margin-left: -0.375rem;
      border-radius: 50%;
      border: 2px solid var(--ts-surface);
      background: color-mix(in srgb, var(--ts-brand) 18%, var(--ts-surface));
      color: color-mix(in srgb, var(--ts-brand) 70%, var(--ts-ink));
      font-family: var(--ts-font-mono);
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0;
    }
    .ts-avatar--more {
      background: var(--ts-sunken);
      color: var(--ts-muted);
    }
  `,
})
export class AvatarsComponent {
  readonly names = input.required<readonly string[]>();
  readonly max = input(5);
  protected readonly initialsOf = initials;
}