import { render, fireEvent, findAllByText } from '@testing-library/svelte';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import SidebarNavItem from './SidebarNavItem.svelte';
import { tick } from 'svelte';
const showMock = vi.fn();
const hideMock = vi.fn();
vi.mock('../sidebar/floating-item.svelte', async () => {
    return {
        useFloatingItem: vi.fn(() => ({
            showFloatingItem: showMock,
            hideFloatingItem: hideMock,
        })),
    };
});
describe('SidebarNavItem', () => {
    beforeEach(() => {
        vi.resetAllMocks();
    });
    it('renders label and anchor with correct href and aria-label', () => {
        const { container } = render(SidebarNavItem, {
            props: { label: 'Home', href: '/home' },
        });
        const label = findAllByText(container, 'Home');
        expect(label).toBeTruthy();
        const anchor = container.querySelector('a');
        expect(anchor.getAttribute('href')).toBe('/home');
        expect(anchor.getAttribute('aria-label')).toBe('Home');
        expect(anchor.getAttribute('target')).toBe('_self');
    });
    it('applies active and locked classes when props set', () => {
        const { container } = render(SidebarNavItem, {
            props: { label: 'Item', href: '#', active: true, locked: true },
        });
        const anchor = container.querySelector('a');
        expect(anchor.classList.contains('mc-sidebar__link--selected')).toBe(true);
        expect(anchor.classList.contains('mc-sidebar__link--locked')).toBe(true);
        const svg = anchor.querySelector('svg');
        expect(svg).toBeTruthy();
    });
    it('uses _blank target and renders external icon when external=true', () => {
        const { container } = render(SidebarNavItem, {
            props: { label: 'External', href: 'https://example.com', external: true },
        });
        const anchor = container.querySelector('a');
        expect(anchor.getAttribute('target')).toBe('_blank');
        const svg = anchor.querySelector('svg');
        expect(svg).toBeTruthy();
    });
    it('renders floating tooltip element when collapsed and not a sub item', () => {
        const { container } = render(SidebarNavItem, { props: { label: 'Tip', href: '/tip' } });
        const floating = container.querySelector('.mc-sidebar__floating-item');
        expect(floating).toBeTruthy();
        expect(floating?.classList.contains('mc-sidebar__floating-item--hidden')).toBe(true);
    });
    it('does not render floating tooltip when sub is true', () => {
        const { container } = render(SidebarNavItem, {
            props: { label: 'Sub', href: '/sub', sub: true },
        });
        const floating = container.querySelector('.mc-sidebar__floating-item');
        expect(floating).toBeNull();
    });
    it('sets sub = true if SUB_ITEM context is true', async () => {
        const { container } = render(SidebarNavItem, {
            props: {
                label: 'Item',
                href: '/test',
            },
            context: new Map([['SUB_ITEM', true]]),
        });
        document.dispatchEvent(new CustomEvent('update:expanded', { detail: true }));
        await tick();
        const li = container.querySelector('li.mc-sidebar__item');
        expect(li.classList.contains('mc-sidebar__item--sub')).toBe(true);
    });
    it('shows/hide tooltip on focus/blur events', async () => {
        const { container } = render(SidebarNavItem, { props: { label: 'Focus', href: '/focus' } });
        const anchor = container.querySelector('a');
        const floating = container.querySelector('.mc-sidebar__floating-item');
        expect(floating).toBeTruthy();
        await fireEvent.focus(anchor);
        expect(showMock).toHaveBeenCalled();
        await fireEvent.blur(anchor);
        expect(hideMock).toHaveBeenCalled();
    });
    it('shows/hide tooltip on mouseenter/mouseleave events', async () => {
        const { container } = render(SidebarNavItem, { props: { label: 'Focus', href: '/focus' } });
        const anchor = container.querySelector('a');
        const floating = container.querySelector('.mc-sidebar__floating-item');
        expect(floating).toBeTruthy();
        await fireEvent.mouseEnter(anchor);
        expect(showMock).toHaveBeenCalled();
        await fireEvent.mouseLeave(anchor);
        expect(hideMock).toHaveBeenCalled();
    });
});
