import {Component, Input} from '@angular/core';
import {Player} from '../../model/player';
import {Event} from '../../model/event';
import {Tournament} from '../../model/tournament';
import {FullNamePipe} from '../../pipes/fullname-pipe';
import {MatTooltip} from '@angular/material/tooltip';

@Component({
  selector: 'app-player-display',
  standalone: true,
  imports: [FullNamePipe, MatTooltip],
  styleUrls: ['./player-display.component.scss'],
  template: `
    @let substitute = getSubstituteForEvent(player, event);
    <span [class.has-substitute]="substitute"
          [matTooltip]="substitute ? 'Valt in voor ' + (player | fullName) : ''"
          matTooltipPosition="below">{{ substitute || (player | fullName) }}</span>
  `
})
export class PlayerDisplayComponent {
  @Input({ required: true }) player!: Player;
  @Input({ required: true }) event!: Event;
  @Input({ required: true }) tournament!: Tournament;

  getSubstituteForEvent(player: Player, event: Event): string | undefined {
    const tournamentPlayer = this.tournament.tournamentPlayers.find(
      tp => tp.playerId === player.id
    );
    if (!tournamentPlayer) return undefined;

    const substitution = tournamentPlayer.substitutions.find(
      s => s.event === event.type
    );
    if (!substitution) return undefined;

    return this.tournament.tournamentPlayers.find(
      p => p.id === substitution.substitute
    )?.name;
  }
}