import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import TestVariant from '@digigov/ui/utils/TestVariant'
import { DarkVariant } from '@digigov/ui/content/Table/__stories__/DarkVariant';
import { DarkVariantWithVerticalHeaders } from '@digigov/ui/content/Table/__stories__/DarkVariantWithVerticalHeaders';
import { Default } from '@digigov/ui/content/Table/__stories__/Default';
import { DefinedWidth } from '@digigov/ui/content/Table/__stories__/DefinedWidth';
import { Dense } from '@digigov/ui/content/Table/__stories__/Dense';
import { Full } from '@digigov/ui/content/Table/__stories__/Full';
import { MultipleProps } from '@digigov/ui/content/Table/__stories__/MultipleProps';
import { NoData } from '@digigov/ui/content/Table/__stories__/NoData';
import { NumericDataType } from '@digigov/ui/content/Table/__stories__/NumericDataType';
import { RowColors } from '@digigov/ui/content/Table/__stories__/RowColors';
import { Stacked } from '@digigov/ui/content/Table/__stories__/Stacked';
import { TableCaptions } from '@digigov/ui/content/Table/__stories__/TableCaptions';
import { UsingHighlights } from '@digigov/ui/content/Table/__stories__/UsingHighlights';
import { VerticalBorders } from '@digigov/ui/content/Table/__stories__/VerticalBorders';
import { VerticalHeaders } from '@digigov/ui/content/Table/__stories__/VerticalHeaders';
import { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';
import { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
import { WithMaxWidthWithOverflow } from '@digigov/ui/content/Table/__stories__/WithMaxWidthWithOverflow';
import { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
import { ZebraProp } from '@digigov/ui/content/Table/__stories__/ZebraProp';
const SCREENSHOT_DELAY = 2_000;
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

test('renders the All Table variants', async ({ mount, page }) => {
  await mount(
    
  <div>
    <TestVariant title="DarkVariant">
      <DarkVariant />
    </TestVariant>
    <TestVariant title="DarkVariantWithVerticalHeaders">
      <DarkVariantWithVerticalHeaders />
    </TestVariant>
    <TestVariant title="Default">
      <Default />
    </TestVariant>
    <TestVariant title="DefinedWidth">
      <DefinedWidth />
    </TestVariant>
    <TestVariant title="Dense">
      <Dense />
    </TestVariant>
    <TestVariant title="Full">
      <Full />
    </TestVariant>
    <TestVariant title="MultipleProps">
      <MultipleProps />
    </TestVariant>
    <TestVariant title="NoData">
      <NoData />
    </TestVariant>
    <TestVariant title="NumericDataType">
      <NumericDataType />
    </TestVariant>
    <TestVariant title="RowColors">
      <RowColors />
    </TestVariant>
    <TestVariant title="Stacked">
      <Stacked />
    </TestVariant>
    <TestVariant title="TableCaptions">
      <TableCaptions />
    </TestVariant>
    <TestVariant title="UsingHighlights">
      <UsingHighlights />
    </TestVariant>
    <TestVariant title="VerticalBorders">
      <VerticalBorders />
    </TestVariant>
    <TestVariant title="VerticalHeaders">
      <VerticalHeaders />
    </TestVariant>
    <TestVariant title="WithFloatingScroll">
      <WithFloatingScroll />
    </TestVariant>
    <TestVariant title="WithLoader">
      <WithLoader />
    </TestVariant>
    <TestVariant title="WithMaxWidthWithOverflow">
      <WithMaxWidthWithOverflow />
    </TestVariant>
    <TestVariant title="WithSortFilters">
      <WithSortFilters />
    </TestVariant>
    <TestVariant title="ZebraProp">
      <ZebraProp />
    </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);

  await delay(SCREENSHOT_DELAY);

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