import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { <%= classify(name) %>, <%= classify(name) %>Slide } from './<%= dasherize(name) %>';

@Component({
  imports: [<%= classify(name) %>, <%= classify(name) %>Slide],
  template: `
    <<%= selector %>>
      <ng-template <%= camelize(name) %>Slide id="intro" label="Introduction">
        <h2>Intro slide</h2>
      </ng-template>
      <ng-template <%= camelize(name) %>Slide id="summary" label="Summary">
        <h2>Summary slide</h2>
      </ng-template>
    </<%= selector %>>
  `,
})
class HostComponent {}

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

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

    fixture = TestBed.createComponent(HostComponent);
    fixture.detectChanges();
    host = fixture.nativeElement as HTMLElement;
  });

  it('renders carousel and active slide semantics', () => {
    const carousel = host.querySelector<HTMLElement>('[aria-roledescription="carousel"]');
    const slides = Array.from(host.querySelectorAll<HTMLElement>('[aria-roledescription="slide"]'));

    expect(carousel?.getAttribute('aria-label')).toBe('Featured items');
    expect(slides).toHaveLength(2);
    expect(slides[0].hidden).toBe(false);
    expect(slides[0].getAttribute('aria-label')).toBe('1 of 2: Introduction');
    expect(slides[1].hidden).toBe(true);
  });

  it('moves between slides and wraps with previous/next buttons', () => {
    const buttons = Array.from(host.querySelectorAll<HTMLButtonElement>('button'));
    const getSlides = () => Array.from(host.querySelectorAll<HTMLElement>('[aria-roledescription="slide"]'));

    buttons.find((button) => button.getAttribute('aria-label') === 'Next slide')?.click();
    fixture.detectChanges();

    expect(getSlides()[0].hidden).toBe(true);
    expect(getSlides()[1].hidden).toBe(false);
    expect(host.textContent).toContain('Summary slide');

    buttons.find((button) => button.getAttribute('aria-label') === 'Next slide')?.click();
    fixture.detectChanges();

    expect(getSlides()[0].hidden).toBe(false);
    expect(getSlides()[1].hidden).toBe(true);

    buttons.find((button) => button.getAttribute('aria-label') === 'Previous slide')?.click();
    fixture.detectChanges();

    expect(getSlides()[0].hidden).toBe(true);
    expect(getSlides()[1].hidden).toBe(false);
  });
});