import { signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { of } from 'rxjs';
import { provideRouter } from '@angular/router';
import { AuthStore } from '../../../../core/auth/auth-store';
import { PenaltyApi } from '../../../../core/team/penalty-api';
import { TeamStore } from '../../../../core/team/team-store';
import { Penalties } from './penalties';

describe('Penalties', () => {
  it('renders the catalog and lets a captain add an entry', async () => {
    const createPenalty = vi.fn(() => of({ id: 2, description: 'Handy in der Kabine', amount: 3 }));
    const loadPenalties = vi.fn(() => of([{ id: 1, description: 'Zu spät', amount: 5 }]));
    const team = {
      id: 5,
      name: 'Team A',
      alias: 'a',
      balance: 0,
      players: [
        {
          id: 1,
          firstName: 'Alex',
          lastName: 'Muster',
          balance: 0,
          active: true,
          teamRole: { id: 3 },
          user: { id: 42 },
        },
      ],
    };
    await TestBed.configureTestingModule({
      imports: [Penalties],
      providers: [
        provideRouter([]),
        { provide: TeamStore, useValue: { team: signal(team) } },
        { provide: AuthStore, useValue: { currentUser: signal({ id: 42, role: { id: 2 } }) } },
        { provide: PenaltyApi, useValue: { loadPenalties, createPenalty } },
      ],
    }).compileComponents();
    const fixture = TestBed.createComponent(Penalties);
    fixture.detectChanges();
    expect(fixture.nativeElement.textContent).toContain('Zu spät');

    fixture.componentInstance['form'].setValue({ description: 'Handy in der Kabine', amount: 3 });
    fixture.componentInstance['createPenalty']();

    expect(createPenalty).toHaveBeenCalledWith({
      teamId: 5,
      description: 'Handy in der Kabine',
      amount: 3,
    });
    expect(fixture.componentInstance['penalties']().length).toBe(2);
  });
});
