import {
    fireEvent,
    render,
    screen,
} from '@testing-library/svelte';
import { themeManager } from '../../model';
import ThemeSwitch from './ThemeSwitch.svelte';

const context = new Map([['responsive', { isMobile: false }]]);

describe('ThemeSwitch', () => {
    beforeEach(() => {
        themeManager.setTheme('light');
    });

    describe('Rendering', () => {
        it('renders an icon button', () => {
            render(ThemeSwitch, { context });
            expect(screen.getByRole('button')).toBeInTheDocument();
        });

        it('has "Toggle theme" title', () => {
            render(ThemeSwitch, { context });
            expect(screen.getByTitle('Toggle theme')).toBeInTheDocument();
        });

        it('renders an SVG icon', () => {
            const { container } = render(ThemeSwitch, { context });
            expect(container.querySelector('svg')).toBeInTheDocument();
        });
    });

    describe('Interaction', () => {
        it('toggles theme from light to dark on click', async () => {
            render(ThemeSwitch, { context });
            expect(themeManager.value).toBe('light');
            await fireEvent.click(screen.getByRole('button'));
            expect(themeManager.value).toBe('dark');
        });

        it('toggles theme from dark to light on click', async () => {
            themeManager.setTheme('dark');
            render(ThemeSwitch, { context });
            await fireEvent.click(screen.getByRole('button'));
            expect(themeManager.value).toBe('light');
        });

        it('double click returns to original theme', async () => {
            render(ThemeSwitch, { context });
            const btn = screen.getByRole('button');
            await fireEvent.click(btn);
            await fireEvent.click(btn);
            expect(themeManager.value).toBe('light');
        });
    });
});