import { render, fireEvent } from '@testing-library/svelte';
import { vi, describe, it, beforeEach, expect } from 'vitest';
import SidebarShortcuts from './SidebarShortcuts.svelte';
const showMock = vi.fn();
const hideMock = vi.fn();
const triggerKeydownMock = vi.fn();
const listboxKeydownMock = vi.fn();
vi.mock('../sidebar/floating-item.svelte', async () => {
    return {
        useFloatingItem: vi.fn(() => ({
            floatingItemIsDisplayed: false,
            showFloatingItem: showMock,
            hideFloatingItem: hideMock,
            onTriggerKeydown: triggerKeydownMock,
            onListboxKeydown: listboxKeydownMock,
        })),
    };
});
describe('SidebarShortcuts', () => {
    beforeEach(() => {
        vi.resetAllMocks();
    });
    it('renders the trigger button in collapsed mode', async () => {
        const { container } = render(SidebarShortcuts, { props: { stacked: false } });
        const button = container.querySelector('button.mc-sidebar__trigger');
        expect(button).toBeTruthy();
        expect(button?.getAttribute('aria-haspopup')).toBe('menu');
        expect(button?.getAttribute('aria-expanded')).toBe('false');
        const icon = button?.querySelector('svg');
        expect(icon).toBeTruthy();
    });
    it('renders the floating listbox in collapsed mode', async () => {
        const { container } = render(SidebarShortcuts, { props: { stacked: true } });
        const listbox = container.querySelector('.mc-sidebar__floating-item');
        expect(listbox).toBeTruthy();
        expect(listbox?.classList.contains('mc-sidebar__floating-item--hidden')).toBe(true);
    });
    it('calls showFloatingItem and hideFloatingItem on trigger mouse events', async () => {
        const { container } = render(SidebarShortcuts, { props: { stacked: true } });
        const button = container.querySelector('button.mc-sidebar__trigger');
        await fireEvent.mouseEnter(button);
        expect(showMock).toHaveBeenCalled();
        await fireEvent.mouseLeave(button);
        expect(hideMock).toHaveBeenCalled();
    });
    it('calls onTriggerKeydown when a key is pressed on trigger', async () => {
        const { container } = render(SidebarShortcuts, { props: { stacked: false } });
        const button = container.querySelector('button.mc-sidebar__trigger');
        await fireEvent.keyDown(button, { key: 'Enter' });
        expect(triggerKeydownMock).toHaveBeenCalled();
    });
    it('calls showFloatingItem and hideFloatingItem on trigger focus/blur', async () => {
        const { container } = render(SidebarShortcuts, { props: { stacked: true } });
        const button = container.querySelector('button.mc-sidebar__trigger');
        await fireEvent.focus(button);
        expect(showMock).toHaveBeenCalled();
        await fireEvent.blur(button);
        expect(hideMock).toHaveBeenCalled();
    });
    it('calls onListboxKeydown when a key is pressed on listbox', async () => {
        const { container } = render(SidebarShortcuts, { props: { stacked: false } });
        const listbox = container.querySelector('.mc-sidebar__floating-item');
        await fireEvent.keyDown(listbox, { key: 'ArrowDown' });
        expect(listboxKeydownMock).toHaveBeenCalled();
    });
    it('calls hideFloatingItem when listbox blur or mouseleave', async () => {
        const { container } = render(SidebarShortcuts, { props: { stacked: true } });
        const listbox = container.querySelector('.mc-sidebar__floating-item');
        await fireEvent.blur(listbox);
        expect(hideMock).toHaveBeenCalled();
        await fireEvent.mouseLeave(listbox);
        expect(hideMock).toHaveBeenCalledTimes(2);
    });
    it('displays a section when expanded is true', async () => {
        const sidebar = document.createElement('m-sidebar');
        sidebar.setAttribute('expanded', '');
        document.body.appendChild(sidebar);
        const { container } = render(SidebarShortcuts, { props: { stacked: true } });
        const section = container.querySelector('section');
        expect(section).toBeTruthy();
    });
});
