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 com Pix" (pixSubmit)="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 Pix method selection and payment fields', () => {
    expect(fixture.nativeElement.querySelector('[role="radiogroup"]')).toBeTruthy();
    expect(fixture.nativeElement.querySelectorAll('input[type="radio"]').length).toBe(3);
    expect(input('pixKey')).toBeTruthy();
    expect(input('amount').inputMode).toBe('decimal');
  });

  it('validates required Pix fields before emitting', () => {
    submit();

    expect(fixture.nativeElement.querySelector('[role="alert"]').textContent).toContain('obrigatório');
    expect(fixture.componentInstance.submitted).toBeNull();
  });

  it('emits Pix payment details', () => {
    input('pixKey').value = 'customer@example.com';
    input('pixKey').dispatchEvent(new Event('input', { bubbles: true }));
    input('amount').value = '99.90';
    input('amount').dispatchEvent(new Event('input', { bubbles: true }));
    fixture.detectChanges();

    submit();

    expect(fixture.componentInstance.submitted?.pixKey).toBe('customer@example.com');
    expect(fixture.nativeElement.querySelector('[role="status"]').textContent).toContain('pronto para revisão');
  });
});