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

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

@Component({
  imports: [<%= classify(name) %>, <%= classify(name) %>Item, <%= classify(name) %>Menu, <%= classify(name) %>Toggle],
  template: `
    <nav <%= camelize(name) %> label="Main navigation" #nav="<%= camelize(name) %>">
      <a class="brand" href="/">Acme</a>

      <button type="button" <%= camelize(name) %>Toggle aria-label="Toggle navigation">
        <span aria-hidden="true"></span>
      </button>

      <div <%= camelize(name) %>Menu>
        <ul>
          @for (item of items; track item.href) {
            <li>
              <a
                <%= camelize(name) %>Item
                [href]="item.href"
                [current]="item.current"
                [disabled]="item.disabled"
              >
                {{ item.label }}
              </a>
            </li>
          }
        </ul>
      </div>
    </nav>
  `,
})
class HostComponent {
  readonly items = [
    { label: 'Home', href: '/', current: true },
    { label: 'Projects', href: '/projects' },
    { label: 'Disabled', href: '/disabled', disabled: true },
  ];
}

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('decorates consumer-owned markup with navigation semantics', () => {
    const nav = host.querySelector<HTMLElement>('nav');

    expect(nav?.getAttribute('aria-label')).toBe('Main navigation');
    expect(host.textContent).toContain('Acme');
  });

  it('reflects aria-current and aria-disabled on items without owning their markup', () => {
    const links = Array.from(host.querySelectorAll<HTMLAnchorElement>('li a'));

    expect(links[0].getAttribute('aria-current')).toBe('page');
    expect(links[2].getAttribute('aria-disabled')).toBe('true');
  });

  it('toggles the collapsible menu and closes it when a link is activated', () => {
    const toggle = host.querySelector<HTMLButtonElement>('button');
    const menu = host.querySelector<HTMLElement>('div');
    const projectsLink = Array.from(host.querySelectorAll<HTMLAnchorElement>('li a'))[1];

    expect(toggle?.getAttribute('aria-expanded')).toBe('false');
    expect(menu?.hidden).toBe(true);
    expect(toggle?.getAttribute('aria-controls')).toBe(menu?.id);

    toggle?.click();
    fixture.detectChanges();

    expect(toggle?.getAttribute('aria-expanded')).toBe('true');
    expect(menu?.hidden).toBe(false);

    projectsLink.click();
    fixture.detectChanges();

    expect(toggle?.getAttribute('aria-expanded')).toBe('false');
    expect(menu?.hidden).toBe(true);
  });
});