import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { <%= classify(name) %>, <%= classify(name) %>Account } from './<%= dasherize(name) %>';

@Component({
  imports: [<%= classify(name) %>],
  template: `
    <<%= selector %>
      label="Conta de origem"
      [(selectedId)]="selectedId"
      [accounts]="accounts"
      (accountSelect)="selectedAccount = $event"
    />
  `,
})
class HostComponent {
  selectedId: string | null = 'checking';
  selectedAccount: <%= classify(name) %>Account | null = null;
  accounts: <%= classify(name) %>Account[] = [
    {
      id: 'checking',
      label: 'Conta corrente principal',
      type: 'Conta corrente',
      accountNumber: 'Agência 0001 · Conta 12345-6',
      balance: 'R$ 1.000,00',
      currency: 'BRL',
    },
    {
      id: 'savings',
      label: 'Poupança',
      type: 'Conta poupança',
      accountNumber: 'Agência 0001 · Conta 22222-2',
      balance: 'R$ 2.500,00',
      currency: 'BRL',
    },
  ];
}

describe('<%= classify(name) %>', () => {
  let fixture: ComponentFixture<HostComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({ imports: [HostComponent] }).compileComponents();
    fixture = TestBed.createComponent(HostComponent);
    fixture.detectChanges();
  });

  it('renders a fieldset with labelled native radio options', () => {
    const fieldset = fixture.nativeElement.querySelector('fieldset');
    const legend = fixture.nativeElement.querySelector('legend');
    const radios = fixture.nativeElement.querySelectorAll('input[type="radio"]');

    expect(fieldset.getAttribute('aria-labelledby')).toBe(legend.id);
    expect(legend.textContent).toContain('Conta de origem');
    expect(radios.length).toBe(2);
    expect(radios[0].getAttribute('aria-describedby')).toBeTruthy();
  });

  it('emits the selected account', () => {
    const radios = fixture.nativeElement.querySelectorAll('input[type="radio"]');

    radios[1].click();
    fixture.detectChanges();

    expect(fixture.componentInstance.selectedId).toBe('savings');
    expect(fixture.componentInstance.selectedAccount?.label).toBe('Poupança');
  });
});