import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import ChronikFilterPills from './ChronikFilterPills.svelte';

afterEach(cleanup);

describe('ChronikFilterPills', () => {
	it('renders the radiogroup with the label', async () => {
		render(ChronikFilterPills, { props: { value: 'alle' as const, onChange: () => {} } });

		await expect
			.element(page.getByRole('radiogroup', { name: /aktivitäten filtern/i }))
			.toBeVisible();
	});

	it('renders all five filter pills', async () => {
		render(ChronikFilterPills, { props: { value: 'alle' as const, onChange: () => {} } });

		const radios = document.querySelectorAll('[role="radio"]');
		expect(radios.length).toBe(5);
	});

	it('marks the active filter as aria-checked=true', async () => {
		render(ChronikFilterPills, { props: { value: 'fuer-dich' as const, onChange: () => {} } });

		const active = document.querySelector('[data-filter-value="fuer-dich"]') as HTMLElement;
		expect(active.getAttribute('aria-checked')).toBe('true');
	});

	it('sets tabindex=0 on the active pill and -1 on others', async () => {
		render(ChronikFilterPills, { props: { value: 'kommentare' as const, onChange: () => {} } });

		const active = document.querySelector('[data-filter-value="kommentare"]') as HTMLElement;
		const others = Array.from(document.querySelectorAll('[role="radio"]')).filter(
			(el) => el !== active
		) as HTMLElement[];
		expect(active.tabIndex).toBe(0);
		others.forEach((el) => expect(el.tabIndex).toBe(-1));
	});

	it('calls onChange with the new filter value when clicked', async () => {
		const onChange = vi.fn();
		render(ChronikFilterPills, { props: { value: 'alle' as const, onChange } });

		const transcription = document.querySelector(
			'[data-filter-value="transkription"]'
		) as HTMLElement;
		transcription.click();

		expect(onChange).toHaveBeenCalledWith('transkription');
	});
});
