import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { userEvent } from 'vitest/browser';

import PersonTypeSelector from './PersonTypeSelector.svelte';

afterEach(() => cleanup());

describe('PersonTypeSelector', () => {
	it('radiogroup has an accessible name via aria-label', () => {
		const { container } = render(PersonTypeSelector, { value: 'PERSON' });
		const radiogroup = container.querySelector('[role="radiogroup"]');
		expect(radiogroup).not.toBeNull();
		expect(radiogroup!.getAttribute('aria-label')).toBeTruthy();
	});

	it('hidden input value updates when user navigates with ArrowRight', async () => {
		const { container } = render(PersonTypeSelector, { value: 'PERSON' });
		const hiddenInput = container.querySelector('input[type="hidden"]') as HTMLInputElement;
		expect(hiddenInput.value).toBe('PERSON');

		const personButton = container.querySelector('[aria-checked="true"]') as HTMLElement;
		personButton.focus();
		await userEvent.keyboard('{ArrowRight}');

		expect(hiddenInput.value).toBe('INSTITUTION');
	});

	it('hidden input value updates when user navigates with ArrowLeft (wraps around)', async () => {
		const { container } = render(PersonTypeSelector, { value: 'PERSON' });
		const hiddenInput = container.querySelector('input[type="hidden"]') as HTMLInputElement;
		expect(hiddenInput.value).toBe('PERSON');

		const personButton = container.querySelector('[aria-checked="true"]') as HTMLElement;
		personButton.focus();
		await userEvent.keyboard('{ArrowLeft}');

		expect(hiddenInput.value).toBe('UNKNOWN');
	});
	it('exactly one button is aria-checked=true for the initial value', () => {
		const { container } = render(PersonTypeSelector, { value: 'INSTITUTION' });
		const buttons = Array.from(container.querySelectorAll('[role="radio"]'));
		const checked = buttons.filter((b) => b.getAttribute('aria-checked') === 'true');
		const unchecked = buttons.filter((b) => b.getAttribute('aria-checked') === 'false');
		expect(checked).toHaveLength(1);
		expect(unchecked).toHaveLength(3);
	});

	it('aria-checked=true moves to clicked button on click', async () => {
		const { container } = render(PersonTypeSelector, { value: 'PERSON' });
		const buttons = Array.from(container.querySelectorAll('[role="radio"]'));
		const groupButton = buttons.find((b) => b.getAttribute('value') === 'GROUP') as HTMLElement;
		await userEvent.click(groupButton);
		expect(groupButton.getAttribute('aria-checked')).toBe('true');
		const others = buttons.filter((b) => b !== groupButton);
		for (const btn of others) {
			expect(btn.getAttribute('aria-checked')).toBe('false');
		}
	});

	it('selected button has tabindex=0, unselected buttons have tabindex=-1', () => {
		const { container } = render(PersonTypeSelector, { value: 'PERSON' });
		const buttons = Array.from(container.querySelectorAll('[role="radio"]'));
		const selected = buttons.find((b) => b.getAttribute('aria-checked') === 'true');
		const unselected = buttons.filter((b) => b.getAttribute('aria-checked') !== 'true');
		expect(selected!.getAttribute('tabindex')).toBe('0');
		for (const btn of unselected) {
			expect(btn.getAttribute('tabindex')).toBe('-1');
		}
	});
});
