import { describe, it, expect, vi, beforeAll, afterAll, afterEach } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import Footer from './SidebarFooter.svelte';
import { tick } from 'svelte';
// -----------------------------
// Mock matchMedia globally
// -----------------------------
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();
});
// -----------------------------
// Mock useFloatingItem
// -----------------------------
const mockShow = vi.fn();
const mockHide = vi.fn();
const mockOnTriggerKeydown = vi.fn();
const mockOnListboxKeydown = vi.fn();
vi.mock('../sidebar/floating-item.svelte', () => ({
    useFloatingItem: () => ({
        floatingItemIsDisplayed: false,
        hideFloatingItem: mockHide,
        showFloatingItem: mockShow,
        onTriggerKeydown: mockOnTriggerKeydown,
        onListboxKeydown: mockOnListboxKeydown,
    }),
}));
describe('SidebarFooter Component', () => {
    afterEach(() => {
        vi.clearAllMocks();
    });
    it('renders avatar, title, and subtitle when provided', () => {
        const { container } = render(Footer, {
            avatar: '/avatar.png',
            title: 'John Doe',
            subtitle: 'Admin',
            logOutLabel: 'Log out',
            expandable: true,
        });
        const img = container.querySelector('img');
        expect(img).not.toBeNull();
        expect(img?.src).toContain('/avatar.png');
        const titleEl = container.querySelector('.mc-sidebar__footer-title');
        const subtitleEl = container.querySelector('.mc-sidebar__footer-subtitle');
        expect(titleEl).not.toBeNull();
        expect(subtitleEl).not.toBeNull();
        expect(titleEl?.textContent).toBe('John Doe');
        expect(subtitleEl?.textContent).toBe('Admin');
    });
    it('does not render the expand button when expandable=false', () => {
        const { container } = render(Footer, { expandable: false });
        const button = container.querySelector('button[aria-label="Expand"]');
        expect(button).toBeNull();
    });
    it('emits a "toggle" event when expand button is clicked', async () => {
        const { container } = render(Footer, { expandable: true });
        const spy = vi.fn();
        document.addEventListener('toggle', spy);
        const button = container.querySelector('button[aria-label="Expand"]');
        expect(button).not.toBeNull();
        await fireEvent.click(button);
        expect(spy).toHaveBeenCalled();
    });
    it('renders SidebarFooterMenu for desktop when isMobile=false', () => {
        const { container } = render(Footer, { logOutLabel: 'Log out', title: 'John Doe' });
        const menu = container.querySelector('#listbox-footer');
        expect(menu).not.toBeNull();
    });
    it('renders SidebarFooterMenu inside mobile button when isMobile=true', async () => {
        // Stub matchMedia pour forcer mobile
        vi.stubGlobal('matchMedia', (query) => ({
            matches: true,
            media: query,
            onchange: null,
            addEventListener: vi.fn(),
            removeEventListener: vi.fn(),
            dispatchEvent: vi.fn(),
        }));
        const { container } = render(Footer, {
            logOutLabel: 'Log out',
            title: 'John Doe', // obligatoire pour créer le trigger
            avatar: '/avatar.png', // obligatoire si title/subtitle conditionnel
        });
        await tick(); // attendre le rendu du DOM
        const mobileButton = container.querySelector('.mc-sidebar__footer-expand--mobile');
        expect(mobileButton).not.toBeNull();
    });
    it('attaches correct floating menu events for mobile', async () => {
        // Force matchMedia à mobile
        vi.stubGlobal('matchMedia', (query) => ({
            matches: true,
            media: query,
            onchange: null,
            addEventListener: vi.fn(),
            removeEventListener: vi.fn(),
            dispatchEvent: vi.fn(),
        }));
        const { container } = render(Footer, {
            logOutLabel: 'Log out',
            title: 'John Doe',
            avatar: '/avatar.png',
        });
        await tick();
        const mobileButton = container.querySelector('.mc-sidebar__footer-expand--mobile');
        expect(mobileButton).not.toBeNull();
        await fireEvent.click(mobileButton);
        expect(mockShow).toHaveBeenCalled();
    });
    it('attaches correct floating menu events for mobile', async () => {
        const { container } = render(Footer, { logOutLabel: 'Log out' });
        const mobileButton = container.querySelector('.mc-sidebar__footer-expand--mobile');
        expect(mobileButton).not.toBeNull();
        await fireEvent.click(mobileButton);
        expect(mockShow).toHaveBeenCalled();
    });
    it('renders MenuIcon correctly depending on floatingItemIsDisplayed', () => {
        const { container } = render(Footer, { logOutLabel: 'Log out' });
        const mobileButton = container.querySelector('.mc-sidebar__footer-expand--mobile');
        expect(mobileButton).not.toBeNull();
        const svg = mobileButton?.querySelector('svg');
        expect(svg).not.toBeNull();
    });
});
