import { TestBed } from '@angular/core/testing';
import { LayoutStateService } from 'shared-state';
import { ThemeSwitcher } from './theme-switcher';

describe('ThemeSwitcher', () => {
  beforeEach(async () => {
    localStorage.clear();
    document.documentElement.classList.remove('dark');
    await TestBed.configureTestingModule({ imports: [ThemeSwitcher] }).compileComponents();
  });

  it('renders a trigger button announcing the current mode', async () => {
    const fixture = TestBed.createComponent(ThemeSwitcher);
    await fixture.whenStable();
    const button = (fixture.nativeElement as HTMLElement).querySelector(
      'button[aria-haspopup="menu"]',
    ) as HTMLButtonElement | null;
    expect(button).not.toBeNull();
    expect(button?.getAttribute('aria-label')).toContain('System');
  });

  it('updates the trigger label and effective theme when a mode is selected', async () => {
    const layout = TestBed.inject(LayoutStateService);
    const fixture = TestBed.createComponent(ThemeSwitcher);
    fixture.detectChanges();
    await fixture.whenStable();

    layout.setThemeMode('dark');
    fixture.detectChanges();
    await fixture.whenStable();
    const button = (fixture.nativeElement as HTMLElement).querySelector(
      'button[aria-haspopup="menu"]',
    ) as HTMLButtonElement | null;
    expect(button?.getAttribute('aria-label')).toContain('Dark');
    expect(document.documentElement.classList.contains('dark')).toBe(true);
  });
});
