import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import Drawer from './Drawer.svelte';
describe('m-drawer component', () => {
    const title = 'My Drawer';
    const contentTitle = 'Drawer Content Title';
    it('renders with title and contentTitle', () => {
        const { getByText } = render(Drawer, {
            props: {
                open: true,
                title,
                contentTitle,
                position: 'right',
            },
        });
        expect(getByText(title)).toBeInTheDocument();
        expect(getByText(contentTitle)).toBeInTheDocument();
    });
    it('applies correct classes when open, extended, and position is set', () => {
        const { container } = render(Drawer, {
            props: {
                open: true,
                position: 'left',
                extended: true,
                title,
            },
        });
        const drawer = container.querySelector('.mc-drawer');
        expect(drawer.classList.contains('is-open')).toBe(true);
        expect(drawer.classList.contains('mc-drawer--left')).toBe(true);
        expect(drawer.classList.contains('mc-drawer--extend')).toBe(true);
    });
    it('sets proper accessibility attributes when open', () => {
        const { container } = render(Drawer, {
            props: {
                open: true,
                title,
            },
        });
        const drawer = container.querySelector('.mc-drawer');
        expect(drawer.getAttribute('role')).toBe('dialog');
        expect(drawer.getAttribute('aria-modal')).toBe('true');
        expect(drawer.getAttribute('aria-hidden')).toBe('false');
        expect(drawer.getAttribute('aria-labelledby')).toBe('drawerTitle');
    });
    it('sets aria-hidden when not open', () => {
        const { container } = render(Drawer, {
            props: {
                open: false,
                title,
            },
        });
        const drawer = container.querySelector('.mc-drawer');
        expect(drawer.getAttribute('aria-hidden')).toBe('true');
        expect(drawer.getAttribute('aria-modal')).toBe('false');
    });
    it('emits update:open event with false when close button clicked', async () => {
        const { container } = render(Drawer, {
            props: {
                open: true,
                title,
            },
        });
        const drawer = container.querySelector('.mc-drawer');
        const closeButton = container.querySelector('.mc-drawer__close');
        const updateOpenHandler = vi.fn();
        drawer.addEventListener('update:open', updateOpenHandler);
        await fireEvent.click(closeButton);
        expect(updateOpenHandler).toHaveBeenCalledOnce();
        expect(updateOpenHandler.mock.calls[0][0].detail).toBe(false);
    });
    it('emits back event when back button clicked', async () => {
        const { container } = render(Drawer, {
            props: {
                open: true,
                title,
                back: true,
            },
        });
        const drawer = container.querySelector('.mc-drawer');
        const backButton = container.querySelector('.mc-drawer__back');
        const backHandler = vi.fn();
        drawer.addEventListener('back', backHandler);
        await fireEvent.click(backButton);
        expect(backHandler).toHaveBeenCalledOnce();
    });
    it('closes drawer on Escape key press', async () => {
        const { container } = render(Drawer, {
            props: {
                open: true,
                title,
            },
        });
        const drawer = container.querySelector('.mc-drawer');
        const updateOpenHandler = vi.fn();
        drawer.addEventListener('update:open', updateOpenHandler);
        await fireEvent.keyDown(drawer, { key: 'Escape' });
        expect(updateOpenHandler).toHaveBeenCalledOnce();
        expect(updateOpenHandler.mock.calls[0][0].detail).toBe(false);
    });
});
