import { NJAvatarList, NJAvatarRoot } from '@engie-group/fluid-design-system-react';
import { expect, test } from '@playwright/experimental-ct-react';

import { themedTestSuite } from '../../../../playwright/themes';

const avatarListScale = ['sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;
const avatarDensity = ['default', 'compact'] as const;
const avatarMaxCount = [undefined, 2] as const;

test.describe('[VISUAL][NJAvatarList]', () => {
  themedTestSuite(({ screenshotFileName }) => {
    test.describe(`should render correctly`, () => {
      test.describe(() => {
        test.use({ viewport: { width: 1100, height: 400 } });

        test(`all variations`, async ({ mount, page }) => {
          await mount(
            <div
              style={{
                display: 'flex',
                flexWrap: 'wrap',
                gap: 'var(--nj-semantic-size-spacing-8)'
              }}
            >
              {avatarDensity.map((density) => (
                <div
                  key={density}
                  style={{
                    display: 'flex',
                    flexWrap: 'wrap',
                    gap: 'var(--nj-semantic-size-spacing-8)'
                  }}
                >
                  {avatarMaxCount.map((max) => (
                    <div
                      key={`${density}-${max}`}
                      style={{
                        display: 'flex',
                        flexWrap: 'wrap',
                        gap: 'var(--nj-semantic-size-spacing-8)',
                        flexDirection: 'column'
                      }}
                    >
                      {avatarListScale.map((scale) => (
                        <NJAvatarList
                          key={`${density}-${max}-${scale}`}
                          scale={scale}
                          density={density}
                          max={max}
                          showMoreLabel="more"
                        >
                          <NJAvatarRoot label="avatar" />
                          <NJAvatarRoot label="avatar" />
                          <NJAvatarRoot label="avatar" />
                          <NJAvatarRoot label="avatar" />
                        </NJAvatarList>
                      ))}
                    </div>
                  ))}
                </div>
              ))}
            </div>
          );
          await expect(page).toHaveScreenshot(screenshotFileName('default'));
        });
      });
    });
  });
});