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

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

@Component({
  imports: [<%= classify(name) %>],
  template: `
    <<%= selector %> triggerLabel="Open filters" title="Filters" description="Refine results">
      <button type="button">Apply filters</button>
    </<%= 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 a closed trigger wired to the panel id', () => {
    const trigger = host.querySelector<HTMLButtonElement>('.offcanvas__trigger');

    expect(trigger?.textContent?.trim()).toBe('Open filters');
    expect(trigger?.getAttribute('aria-controls')).toBeTruthy();
    expect(trigger?.getAttribute('aria-expanded')).toBe('false');
    expect(host.querySelector('[role="dialog"]')).toBeNull();
  });

  it('opens as a modal dialog and closes with Escape, backdrop, and close button', () => {
    const trigger = host.querySelector<HTMLButtonElement>('.offcanvas__trigger');

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

    let panel = host.querySelector<HTMLElement>('[role="dialog"]');
    expect(trigger?.getAttribute('aria-expanded')).toBe('true');
    expect(panel?.getAttribute('aria-modal')).toBe('true');
    expect(panel?.getAttribute('aria-labelledby')).toBeTruthy();
    expect(panel?.getAttribute('aria-describedby')).toBeTruthy();
    expect(panel?.textContent).toContain('Filters');
    expect(panel?.textContent).toContain('Apply filters');

    panel?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
    fixture.detectChanges();
    expect(host.querySelector('[role="dialog"]')).toBeNull();

    trigger?.click();
    fixture.detectChanges();
    host.querySelector<HTMLElement>('.offcanvas__backdrop')?.click();
    fixture.detectChanges();
    expect(host.querySelector('[role="dialog"]')).toBeNull();

    trigger?.click();
    fixture.detectChanges();
    panel = host.querySelector<HTMLElement>('[role="dialog"]');
    panel?.querySelector<HTMLButtonElement>('.offcanvas__close')?.click();
    fixture.detectChanges();
    expect(host.querySelector('[role="dialog"]')).toBeNull();
  });
});