import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import TestVariant from '@digigov/ui/utils/TestVariant'
import { Default } from '@digigov/ui/navigation/NavList/__stories__/Default';
import { HorizontalWithDrawer } from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithDrawer';
import { HorizontalWithoutDrawer } from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer';
import { NavListWithoutNav } from '@digigov/ui/navigation/NavList/__stories__/NavListWithoutNav';
import { UsingHeaderButton } from '@digigov/ui/navigation/NavList/__stories__/UsingHeaderButton';
import { UsingNavListAuto } from '@digigov/ui/navigation/NavList/__stories__/UsingNavListAuto';
import { Vertical } from '@digigov/ui/navigation/NavList/__stories__/Vertical';
import { VerticalWithoutDrawer } from '@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer';
import { WithBadge } from '@digigov/ui/navigation/NavList/__stories__/WithBadge';

test('renders the All NavList variants', async ({ mount, page }) => {
  await mount(
    
  <div>
    <TestVariant title="Default">
      <Default />
    </TestVariant>
    <TestVariant title="HorizontalWithDrawer">
      <HorizontalWithDrawer />
    </TestVariant>
    <TestVariant title="HorizontalWithoutDrawer">
      <HorizontalWithoutDrawer />
    </TestVariant>
    <TestVariant title="NavListWithoutNav">
      <NavListWithoutNav />
    </TestVariant>
    <TestVariant title="UsingHeaderButton">
      <UsingHeaderButton />
    </TestVariant>
    <TestVariant title="UsingNavListAuto">
      <UsingNavListAuto />
    </TestVariant>
    <TestVariant title="Vertical">
      <Vertical />
    </TestVariant>
    <TestVariant title="VerticalWithoutDrawer">
      <VerticalWithoutDrawer />
    </TestVariant>
    <TestVariant title="WithBadge">
      <WithBadge />
    </TestVariant>
  </div>
  )
  await page.evaluate(() => document.fonts.ready);

  // Move the mouse to the top-left corner to avoid random hover issues
  await page.mouse.move(0, 0);


  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
  expect(screenshot).toMatchSnapshot();
});