import { describe, it, expect, vi, afterEach } from 'vitest';
import { render, screen, cleanup } from '@testing-library/svelte';
import SegmentedControl from './SegmentedControl.svelte';

afterEach(() => cleanup());

const opts = [
    { label: 'Bookmarks', value: 'bookmarks' as const },
    { label: 'Collections', value: 'collections' as const },
    { label: 'History', value: 'history' as const }
];

describe('SegmentedControl', () => {
    it('marks the active option with aria-checked=true and a single .active class', () => {
        render(SegmentedControl, {
            props: {
                options: opts,
                value: 'collections',
                onchange: () => {},
                ariaLabel: 'Library tab'
            }
        });
        const active = screen.getByRole('radio', { name: 'Collections' });
        expect(active.getAttribute('aria-checked')).toBe('true');
        const inactive = screen.getByRole('radio', { name: 'Bookmarks' });
        expect(inactive.getAttribute('aria-checked')).toBe('false');
    });

    it('fires onchange with the new value when an inactive option is clicked', () => {
        const onchange = vi.fn();
        render(SegmentedControl, {
            props: { options: opts, value: 'bookmarks', onchange, ariaLabel: 'Library tab' }
        });
        screen.getByRole('radio', { name: 'History' }).click();
        expect(onchange).toHaveBeenCalledWith('history');
    });

    it('does not fire onchange when the currently active option is clicked again', () => {
        const onchange = vi.fn();
        render(SegmentedControl, {
            props: { options: opts, value: 'bookmarks', onchange, ariaLabel: 'Library tab' }
        });
        screen.getByRole('radio', { name: 'Bookmarks' }).click();
        expect(onchange).not.toHaveBeenCalled();
    });

    it('exposes the group with the provided aria-label', () => {
        render(SegmentedControl, {
            props: { options: opts, value: 'bookmarks', onchange: () => {}, ariaLabel: 'Library tab' }
        });
        expect(screen.getByRole('radiogroup', { name: 'Library tab' })).toBeTruthy();
    });
});