import { TestBed } from '@angular/core/testing';
import { HttpErrorResponse } from '@angular/common/http';
import { Subject } from 'rxjs';
import { SchoolApi } from '../core/school-api';
import { GroupMembers } from './group-members';

describe('Group membership persistence', () => {
  const api = { membership: vi.fn() };
  beforeEach(() => {
    vi.resetAllMocks();
    TestBed.configureTestingModule({
      imports: [GroupMembers],
      providers: [{ provide: SchoolApi, useValue: api }],
    });
  });
  function component() {
    const fixture = TestBed.createComponent(GroupMembers);
    fixture.componentRef.setInput('schoolId', 7);
    fixture.componentRef.setInput('group', {
      id: 0,
      category: 'Teens',
      type: 'REGULAR',
      startAge: 12,
      endAge: 18,
      styles: [],
      dancerIds: [],
    });
    fixture.componentRef.setInput('dancers', [{ id: 3, name: 'Sam', birthDate: '2010-01-01' }]);
    fixture.componentInstance.ngOnInit();
    return fixture.componentInstance;
  }
  function change(checked: boolean): { checkbox: HTMLInputElement; event: Event } {
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.checked = checked;
    const event = new Event('change');
    Object.defineProperty(event, 'target', { value: checkbox });
    return { checkbox, event };
  }

  it('shows the pending choice but emits new membership only after the server confirms', async () => {
    const request = new Subject<void>();
    api.membership.mockReturnValue(request);
    const members = component();
    const changed = vi.fn();
    members.changed.subscribe(changed);
    const { checkbox, event } = change(true);
    const pending = members.toggle(3, event);
    expect(checkbox.checked).toBe(true);
    expect(members.busy()).toBe(true);
    expect(changed).not.toHaveBeenCalled();
    request.next();
    request.complete();
    await pending;
    expect(changed).toHaveBeenCalledWith([3]);
    expect(members.memberIds()).toEqual([3]);
    expect(members.busy()).toBe(false);
  });

  it('restores the previous checkbox state when saving fails', async () => {
    const request = new Subject<void>();
    api.membership.mockReturnValue(request);
    const members = component();
    const changed = vi.fn();
    members.changed.subscribe(changed);
    const { checkbox, event } = change(true);
    const pending = members.toggle(3, event);
    request.error(new HttpErrorResponse({ status: 0 }));
    await pending;
    expect(checkbox.checked).toBe(false);
    expect(members.memberIds()).toEqual([]);
    expect(changed).not.toHaveBeenCalled();
    expect(members.error()).toContain('niet bereikbaar');
    expect(members.busy()).toBe(false);
  });
});