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

@Component({
  imports: [<%= classify(name) %>, <%= classify(name) %>Label, <%= classify(name) %>Leading, <%= classify(name) %>Trailing],
  template: `
    <<%= selector %>
      label="Save"
      variant="danger"
      size="lg"
      [busy]="busy"
      [disabled]="disabled"
      [pressed]="pressed"
      (buttonClick)="clicked = true"
    >
      <ng-template <%= camelize(name) %>Leading>Lead</ng-template>
      <ng-template <%= camelize(name) %>Label>Projected label</ng-template>
      <ng-template <%= camelize(name) %>Trailing>Trail</ng-template>
    </<%= selector %>>
  `,
})
class HostComponent {
  busy = false;
  disabled = false;
  pressed: boolean | null = true;
  clicked = false;
}

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

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

  function button(): HTMLButtonElement {
    return fixture.nativeElement.querySelector('button');
  }

  it('renders projected label, slots, classes, and pressed state', () => {
    expect(button().textContent).toContain('Projected label');
    expect(button().textContent).toContain('Lead');
    expect(button().textContent).toContain('Trail');
    expect(button().className).toContain('button--danger');
    expect(button().className).toContain('button--lg');
    expect(button().getAttribute('aria-pressed')).toBe('true');
  });

  it('emits buttonClick when enabled', () => {
    button().click();
    fixture.detectChanges();

    expect(fixture.componentInstance.clicked).toBe(true);
  });

  it('blocks clicks when busy or disabled', () => {
    const buttonFixture = TestBed.createComponent(<%= classify(name) %>);
    let clicked = false;
    buttonFixture.componentInstance.buttonClick.subscribe(() => {
      clicked = true;
    });

    buttonFixture.componentRef.setInput('label', 'Save');
    buttonFixture.componentRef.setInput('busy', true);
    buttonFixture.detectChanges();

    const busyButton = buttonFixture.nativeElement.querySelector('button') as HTMLButtonElement;
    busyButton.click();

    expect(clicked).toBe(false);
    expect(busyButton.disabled).toBe(true);
    expect(busyButton.getAttribute('aria-busy')).toBe('true');

    buttonFixture.componentRef.setInput('busy', false);
    buttonFixture.componentRef.setInput('disabled', true);
    buttonFixture.detectChanges();

    const disabledButton = buttonFixture.nativeElement.querySelector('button') as HTMLButtonElement;
    disabledButton.click();

    expect(clicked).toBe(false);
    expect(disabledButton.disabled).toBe(true);
  });
});