import { test, expect } from '@playwright/test';
import { AxeBuilder } from '@axe-core/playwright';

test.describe('Accessible Drawer Component', () => {
    test.beforeEach(async ({ page }) => {
        // Navigate to the test harness view for the drawer
        await page.goto('/test/drawer');
    });

    test('should pass AAA accessibility audits', async ({ page }) => {
        await page.waitForLoadState('networkidle');

        const accessibilityScanResults = await new AxeBuilder({ page })
            .withTags(['wcag2a', 'wcag2aa', 'wcag2aaa', 'best-practice'])
            .analyze();

        expect(accessibilityScanResults.violations).toEqual([]);
    });

    test('should toggle content visibility and ARIA states via mouse click', async ({ page }) => {
        const drawerHeader = page.locator('#example-drawer-drawer-header');
        const drawerContent = page.locator('#example-drawer-drawer-contents');

        // Assert Initial State
        await expect(drawerHeader).toHaveAttribute('aria-expanded', 'false');
        await expect(drawerContent).toHaveClass(/hidden/);

        // Interact (Open)
        await drawerHeader.click();

        // Assert Open State
        await expect(drawerHeader).toHaveAttribute('aria-expanded', 'true');
        await expect(drawerContent).not.toHaveClass(/hidden/);

        // Interact (Close)
        await drawerHeader.click();

        // Assert Closed State
        await expect(drawerHeader).toHaveAttribute('aria-expanded', 'false');
        await expect(drawerContent).toHaveClass(/hidden/);
    });

    test('should toggle content visibility via keyboard navigation', async ({ page }) => {
        const drawerHeader = page.locator('#example-drawer-drawer-header');
        const drawerContent = page.locator('#example-drawer-drawer-contents');

        // Focus the drawer header using the keyboard
        await page.keyboard.press('Tab');
        await expect(drawerHeader).toBeFocused();

        // Open with Space
        await page.keyboard.press(' ');
        await expect(drawerHeader).toHaveAttribute('aria-expanded', 'true');
        await expect(drawerContent).not.toHaveClass(/hidden/);

        // Close with Enter
        await page.keyboard.press('Enter');
        await expect(drawerHeader).toHaveAttribute('aria-expanded', 'false');
        await expect(drawerContent).toHaveClass(/hidden/);
    });

    test('visual regression: component renders correctly', async ({ page }) => {
        const drawerContainer = page.locator('#example-drawer');
        const drawerHeader = page.locator('#example-drawer-drawer-header');

        // Snapshot the closed state
        await expect(drawerContainer).toHaveScreenshot('drawer-closed.png');

        // Snapshot the open state
        await drawerHeader.click();
        await expect(drawerContainer).toHaveScreenshot('drawer-open.png');
    });
});