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

@Component({
  imports: [<%= classify(name) %>],
  template: `
    <<%= selector %>
      label="Message"
      hint="Be concise."
      error="Message is required."
      [required]="true"
      [maxLength]="20"
      [(value)]="message"
    />
  `,
})
class HostComponent {
  message = '';
}

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

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

  function textarea(): HTMLTextAreaElement {
    return fixture.nativeElement.querySelector('textarea');
  }

  it('wires label, required state, counter, hint, and error', () => {
    const label = fixture.nativeElement.querySelector('label');
    const hint = fixture.nativeElement.querySelector('.field__hint');
    const counter = fixture.nativeElement.querySelector('.field__counter');
    const error = fixture.nativeElement.querySelector('.field__error');

    expect(label.getAttribute('for')).toBe(textarea().id);
    expect(textarea().required).toBe(true);
    expect(textarea().getAttribute('aria-required')).toBe('true');
    expect(textarea().getAttribute('aria-invalid')).toBe('true');
    expect(textarea().getAttribute('aria-describedby')).toContain(hint.id);
    expect(textarea().getAttribute('aria-describedby')).toContain(counter.id);
    expect(textarea().getAttribute('aria-describedby')).toContain(error.id);
    expect(counter.textContent).toContain('20 characters left');
  });

  it('updates the bound value and remaining counter on input', () => {
    textarea().value = 'Hello';
    textarea().dispatchEvent(new Event('input', { bubbles: true }));
    fixture.detectChanges();

    expect(fixture.componentInstance.message).toBe('Hello');
    expect(fixture.nativeElement.querySelector('.field__counter').textContent).toContain('15 characters left');
  });
});