import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it } from 'vitest';
import { usePlaybackStore } from '../store/usePlaybackStore';
import { NowPlayingPanel } from './NowPlayingPanel';

describe('NowPlayingPanel', () => {
  it('announces itself as a modal and keeps keyboard focus inside', async () => {
    usePlaybackStore.setState({ currentTrack: null, queue: [], currentIndex: -1, isPlaying: false });
    const user = userEvent.setup();
    render(
      <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
        <NowPlayingPanel onClose={() => undefined} />
      </QueryClientProvider>
    );

    const dialog = screen.getByRole('dialog', { name: 'Now playing queue' });
    const close = screen.getByRole('button', { name: 'Close now playing' });
    expect(dialog).toHaveAttribute('aria-modal', 'true');
    expect(close).toHaveFocus();
    await user.tab({ shift: true });
    expect(screen.getByRole('button', { name: 'Next' })).toHaveFocus();
    await user.tab();
    expect(close).toHaveFocus();
  });
});
