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

@Component({
  imports: [<%= classify(name) %>, <%= classify(name) %>ItemTemplate],
  template: `
    <<%= selector %>
      label="Período de visualização"
      selectionMode="multiple"
      [items]="items"
      [(selectedIds)]="selectedIds"
    >
      <ng-template <%= camelize(name) %>Item let-item let-pressed="pressed">
        {{ item.label }} {{ pressed ? 'ligado' : 'desligado' }}
      </ng-template>
    </<%= selector %>>
  `,
})
class HostComponent {
  items: <%= classify(name) %>Item[] = [
    { id: 'day', label: 'Dia', pressed: true },
    { id: 'week', label: 'Semana' },
    { id: 'month', label: 'Mês', disabled: true },
  ];
  selectedIds = ['day'];
}

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

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

  function group(): HTMLElement {
    return fixture.nativeElement.querySelector('[role="group"]');
  }

  function buttons(): HTMLButtonElement[] {
    return Array.from(fixture.nativeElement.querySelectorAll('button'));
  }

  it('renders grouped buttons with labels and pressed state', () => {
    const [day, week, month] = buttons();

    expect(group().getAttribute('aria-label')).toBe('Período de visualização');
    expect(day.getAttribute('aria-pressed')).toBe('true');
    expect(day.textContent).toContain('Dia ligado');
    expect(week.getAttribute('aria-pressed')).toBe('false');
    expect(month.disabled).toBe(true);
  });

  it('updates selectedIds in multiple selection mode', () => {
    buttons()[1].click();
    fixture.detectChanges();

    expect(fixture.componentInstance.selectedIds).toEqual(['day', 'week']);
    expect(buttons()[1].getAttribute('aria-pressed')).toBe('true');
  });

  it('ignores disabled items', () => {
    buttons()[2].click();
    fixture.detectChanges();

    expect(fixture.componentInstance.selectedIds).toEqual(['day']);
  });
});