import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import TestVariant from '@digigov/ui/utils/TestVariant'
import { Default } from '@digigov/ui/form/AutoComplete/__stories__/Default';
import { Multiple } from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
import { MultipleShowingTwoSelected } from '@digigov/ui/form/AutoComplete/__stories__/MultipleShowingTwoSelected';
import { MultipleWithDefaultValues } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithDefaultValues';
import { MultipleWithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength';
import { WithAutoSelect } from '@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect';
import { WithCustomValue } from '@digigov/ui/form/AutoComplete/__stories__/WithCustomValue';
import { WithDefaultValue } from '@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue';
import { WithHint } from '@digigov/ui/form/AutoComplete/__stories__/WithHint';
import { WithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/WithMinLength';
import { WithPlaceHolder } from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
import { WithShowAllValues } from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';

test('renders the All AutoComplete variants', async ({ mount, page }) => {
  await mount(
    
  <div>
    <TestVariant title="Default">
      <Default />
    </TestVariant>
    <TestVariant title="Multiple">
      <Multiple />
    </TestVariant>
    <TestVariant title="MultipleShowingTwoSelected">
      <MultipleShowingTwoSelected />
    </TestVariant>
    <TestVariant title="MultipleWithDefaultValues">
      <MultipleWithDefaultValues />
    </TestVariant>
    <TestVariant title="MultipleWithMinLength">
      <MultipleWithMinLength />
    </TestVariant>
    <TestVariant title="WithAutoSelect">
      <WithAutoSelect />
    </TestVariant>
    <TestVariant title="WithCustomValue">
      <WithCustomValue />
    </TestVariant>
    <TestVariant title="WithDefaultValue">
      <WithDefaultValue />
    </TestVariant>
    <TestVariant title="WithHint">
      <WithHint />
    </TestVariant>
    <TestVariant title="WithMinLength">
      <WithMinLength />
    </TestVariant>
    <TestVariant title="WithPlaceHolder">
      <WithPlaceHolder />
    </TestVariant>
    <TestVariant title="WithShowAllValues">
      <WithShowAllValues />
    </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();
});