import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import SegmentedControl from './SegmentedControl.svelte';
describe('m-segmented-control component', () => {
    const numberBasedProps = {
        segments: [{ label: 'Segment 1' }, { label: 'Segment 2' }, { label: 'Segment 3' }],
        selected: 1,
        size: 's',
        full: false,
    };
    const stringBasedProps = {
        segments: [
            { id: '1', label: 'Segment 1' },
            { id: '2', label: 'Segment 2' },
            { id: '3', label: 'Segment 3' },
        ],
        selected: '2',
        size: 's',
        full: false,
    };
    it('renders correct number of segments with labels', () => {
        const { getAllByRole } = render(SegmentedControl, {
            props: numberBasedProps,
        });
        const buttons = getAllByRole('radio');
        expect(buttons.length).toBe(3);
        expect(buttons[0].textContent).toBe('Segment 1');
        expect(buttons[1].textContent).toBe('Segment 2');
        expect(buttons[2].textContent).toBe('Segment 3');
    });
    describe('Segment selection - number type', () => {
        it('sets the correct initial selected segment', () => {
            const { getAllByRole } = render(SegmentedControl, { props: numberBasedProps });
            const buttons = getAllByRole('radio');
            expect(buttons[1].getAttribute('aria-checked')).toBe('true');
            expect(buttons[1].tabIndex).toBe(0);
            expect(buttons[0].getAttribute('aria-checked')).toBe('false');
            expect(buttons[0].tabIndex).toBe(-1);
        });
        it('updates selected segment and dispatches event on click', async () => {
            const { container, getAllByRole } = render(SegmentedControl, {
                props: numberBasedProps,
            });
            const buttons = getAllByRole('radio');
            const handler = vi.fn();
            container.firstChild?.addEventListener('change', handler);
            await fireEvent.click(buttons[2]);
            expect(handler).toHaveBeenCalledTimes(1);
            expect(handler.mock.calls[0][0].detail).toBe(2);
            expect(buttons[2].getAttribute('aria-checked')).toBe('true');
            expect(buttons[2].tabIndex).toBe(0);
            expect(buttons[1].getAttribute('aria-checked')).toBe('false');
            expect(buttons[1].tabIndex).toBe(-1);
        });
    });
    describe('Segment selection - string type', () => {
        it('sets the correct initial selected segment', () => {
            const { getAllByRole } = render(SegmentedControl, { props: stringBasedProps });
            const buttons = getAllByRole('radio');
            expect(buttons[1].getAttribute('aria-checked')).toBe('true');
            expect(buttons[1].tabIndex).toBe(0);
            expect(buttons[0].getAttribute('aria-checked')).toBe('false');
            expect(buttons[0].tabIndex).toBe(-1);
        });
        it('updates selected segment and dispatches event on click', async () => {
            const { container, getAllByRole } = render(SegmentedControl, {
                props: stringBasedProps,
            });
            const buttons = getAllByRole('radio');
            const handler = vi.fn();
            container.firstChild?.addEventListener('change', handler);
            await fireEvent.click(buttons[2]);
            expect(handler).toHaveBeenCalledTimes(1);
            expect(handler.mock.calls[0][0].detail).toBe('3');
            expect(buttons[2].getAttribute('aria-checked')).toBe('true');
            expect(buttons[2].tabIndex).toBe(0);
            expect(buttons[1].getAttribute('aria-checked')).toBe('false');
            expect(buttons[1].tabIndex).toBe(-1);
        });
    });
    it('applies size and full classes correctly', () => {
        const { container } = render(SegmentedControl, {
            props: { ...numberBasedProps, size: 'm', full: true },
        });
        const rootDiv = container.querySelector('.mc-segmented-control');
        expect(rootDiv.classList.contains('mc-segmented-control--m')).toBe(true);
        expect(rootDiv.classList.contains('mc-segmented-control--full')).toBe(true);
    });
});
