import { expect, test } from '@playwright/experimental-ct-react';
import {
  NJAccordion,
  NJAccordionItem,
  NJAccordionItemContent,
  NJAccordionItemHeader
} from '@engie-group/fluid-design-system-react';
import React from 'react';
import { addThemeToPage, themes } from '../../../../playwright/themes';

test.use({ viewport: { width: 500, height: 300 } });
themes.forEach(({ theme }) => {
  test(`should render correctly in ${theme} theme`, async ({ mount, page }) => {
    await addThemeToPage(page, theme);

    await mount(
      <NJAccordion>
        <NJAccordionItem>
          <NJAccordionItemHeader>Header 1</NJAccordionItemHeader>
          <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
        </NJAccordionItem>
        <NJAccordionItem>
          <NJAccordionItemHeader>Header 2</NJAccordionItemHeader>
          <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
        </NJAccordionItem>
        <NJAccordionItem>
          <NJAccordionItemHeader>Header 3</NJAccordionItemHeader>
          <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
        </NJAccordionItem>
      </NJAccordion>
    );
    await expect(page).toHaveScreenshot();
  });

  test(`should interact on header click in ${theme} theme`, async ({ mount, page }) => {
    await addThemeToPage(page, theme);

    await mount(
      <NJAccordion>
        <NJAccordionItem>
          <NJAccordionItemHeader>Header 1</NJAccordionItemHeader>
          <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
        </NJAccordionItem>
        <NJAccordionItem>
          <NJAccordionItemHeader>Header 2</NJAccordionItemHeader>
          <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
        </NJAccordionItem>
        <NJAccordionItem>
          <NJAccordionItemHeader>Header 3</NJAccordionItemHeader>
          <NJAccordionItemContent>Favere etiam ducunt ad fatalis vita.</NJAccordionItemContent>
        </NJAccordionItem>
      </NJAccordion>
    );

    await page.getByText('Header 1').click();
    await expect(page).toHaveScreenshot();

    await page.getByText('Header 2').click();
    await expect(page).toHaveScreenshot();

    await page.getByText('Header 1').click();
    await expect(page).toHaveScreenshot();
  });
});