import { describe, it, expect, vi, afterAll, beforeAll } from 'vitest';
import { render, waitFor, fireEvent } from '@testing-library/svelte';
import Sidebar from './Sidebar.svelte';
beforeAll(() => {
    vi.stubGlobal('matchMedia', (query) => ({
        matches: query.includes('max-width: 780px'),
        media: query,
        onchange: null,
        addEventListener: vi.fn(),
        removeEventListener: vi.fn(),
        dispatchEvent: vi.fn(),
    }));
});
afterAll(() => {
    vi.unstubAllGlobals();
});
describe('Sidebar component', () => {
    it('renders expanded by default', () => {
        const { container } = render(Sidebar);
        const aside = container.querySelector('aside');
        expect(aside.classList.contains('mc-sidebar--expanded')).toBe(true);
    });
    it('reflects provided expanded prop and updates when changed', async () => {
        const { container, rerender } = render(Sidebar, { expanded: false });
        const aside = container.querySelector('aside');
        expect(aside.classList.contains('mc-sidebar--collapsed')).toBe(true);
        await rerender({ expanded: true });
        await waitFor(() => {
            expect(aside.classList.contains('mc-sidebar--expanded')).toBe(true);
        });
    });
    it('toggles on document "toggle" event and calls onexpanded and emits update:expanded', async () => {
        const onexpanded = vi.fn();
        const { container } = render(Sidebar, { onexpanded });
        const aside = container.querySelector('aside');
        const updateHandler = vi.fn();
        aside.addEventListener('update:expanded', (e) => {
            updateHandler(e.detail);
        });
        expect(aside.classList.contains('mc-sidebar--expanded')).toBe(true);
        document.dispatchEvent(new Event('toggle'));
        await waitFor(() => {
            expect(onexpanded).toHaveBeenCalled();
            expect(updateHandler).toHaveBeenCalled();
            expect(aside.classList.contains('mc-sidebar--collapsed')).toBe(true);
        });
    });
    it('should call onclose and emit close event on close button click', async () => {
        const onclose = vi.fn();
        const { container } = render(Sidebar, { props: { onclose } });
        const button = container.querySelector('.mc-sidebar__close-button button');
        expect(button).not.toBeNull();
        const aside = container.querySelector('aside');
        const closeEventListener = vi.fn();
        aside?.addEventListener('close', closeEventListener);
        await fireEvent.click(button);
        expect(onclose).toHaveBeenCalled();
        expect(closeEventListener).toHaveBeenCalled();
    });
    it('should set expanded to true on resize when isMobile', async () => {
        vi.stubGlobal('matchMedia', (query) => ({
            matches: true, // mobile
            media: query,
            addEventListener: vi.fn(),
            removeEventListener: vi.fn(),
        }));
        const { container } = render(Sidebar, { props: { expanded: false } });
        const aside = container.querySelector('aside');
        expect(aside?.classList.contains('mc-sidebar--collapsed')).toBe(true);
        window.dispatchEvent(new Event('resize'));
        await Promise.resolve(); // attendre le $effect
        expect(aside?.classList.contains('mc-sidebar--expanded')).toBe(true);
    });
});
