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

@Component({
  imports: [<%= classify(name) %>],
  template: `<<%= selector %> title="Pagar boleto" (paymentSubmit)="submitted = $event" />`,
})
class HostComponent {
  submitted: <%= classify(name) %>Value | null = null;
}

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

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

  function input(name: string): HTMLInputElement {
    return fixture.nativeElement.querySelector(`input[name="${name}"]`);
  }

  function submit(): void {
    fixture.nativeElement.querySelector('form').dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
    fixture.detectChanges();
  }

  it('renders native boleto payment fields with labels', () => {
    expect(fixture.nativeElement.querySelector('legend').textContent).toContain('Pagar boleto');
    expect(input('barcode').inputMode).toBe('numeric');
    expect(input('amount').inputMode).toBe('decimal');
    expect(input('dueDate').type).toBe('date');
  });

  it('validates barcode, amount, and due date before emitting', () => {
    submit();

    expect(fixture.nativeElement.querySelector('[role="alert"]').textContent).toContain('código de barras');
    expect(fixture.componentInstance.submitted).toBeNull();
  });

  it('emits a valid payment slip value', () => {
    input('barcode').value = '34191790010104351004791020150008291070026000';
    input('barcode').dispatchEvent(new Event('input', { bubbles: true }));
    input('amount').value = '260.00';
    input('amount').dispatchEvent(new Event('input', { bubbles: true }));
    input('dueDate').value = '2026-08-10';
    input('dueDate').dispatchEvent(new Event('input', { bubbles: true }));
    fixture.detectChanges();

    submit();

    expect(fixture.componentInstance.submitted?.amount).toBe('260.00');
    expect(fixture.nativeElement.querySelector('[role="status"]').textContent).toContain('pronto para revisão');
  });
});