import { expect, test } from '@playwright/experimental-ct-react';

import { themedTestSuite } from '../../../../../playwright/themes';
import { pressOnElement } from '../../../utils/tests';
import { NJNavigationAction } from '../NJNavigationAction';
import { All } from './fragment';

test.describe('[VISUAL][NJNavigationAction]', () => {
  themedTestSuite(({ screenshotFileName }) => {
    test.describe(`should render correctly`, () => {
      test.describe('without props', () => {
        test.describe(() => {
          test.use({ viewport: { width: 800, height: 500 } });

          test('all variants', async ({ mount, page }) => {
            await mount(<All />);
            await expect(page).toHaveScreenshot(screenshotFileName('no props variants'));
          });
        });

        test.describe(() => {
          test.use({ viewport: { width: 350, height: 60 } });

          test('hover & focus', async ({ mount, page }) => {
            await mount(
              <div
                style={{
                  display: 'flex',
                  gap: 'var(--nj-semantic-size-spacing-8)',
                  flexWrap: 'wrap'
                }}
              >
                <NJNavigationAction>Default</NJNavigationAction>
                <NJNavigationAction>Hovered</NJNavigationAction>
                <NJNavigationAction>Focused</NJNavigationAction>
              </div>
            );

            await page.getByRole('button', { name: 'Hovered' }).hover();
            await page.getByRole('button', { name: 'Focused' }).focus();

            await expect(page).toHaveScreenshot(screenshotFileName('hover focus'));
          });
        });

        test.describe(() => {
          test.use({ viewport: { width: 240, height: 60 } });

          test('pressed', async ({ mount, page }) => {
            await mount(
              <div
                style={{
                  display: 'flex',
                  gap: 'var(--nj-semantic-size-spacing-8)',
                  flexWrap: 'wrap'
                }}
              >
                <NJNavigationAction>Default</NJNavigationAction>
                <NJNavigationAction>Pressed</NJNavigationAction>
              </div>
            );

            const element = page.getByRole('button', { name: 'Pressed' });
            await pressOnElement(page, element);
            await expect(page).toHaveScreenshot(screenshotFileName('pressed'));
          });
        });
      });

      test.describe('with icon', () => {
        test.use({ viewport: { width: 940, height: 500 } });

        test('all variants', async ({ mount, page }) => {
          await mount(<All icon="home" />);
          await expect(page).toHaveScreenshot(screenshotFileName('icon variants'));
        });
      });

      test.describe('expandable', () => {
        test.use({ viewport: { width: 940, height: 500 } });

        test('all variants', async ({ mount, page }) => {
          await mount(<All expandable />);
          await expect(page).toHaveScreenshot(screenshotFileName('expandable variants'));
        });
      });

      test.describe('expandable with icon', () => {
        test.use({ viewport: { width: 1100, height: 500 } });

        test('all variants', async ({ mount, page }) => {
          await mount(<All icon="home" expandable />);
          await expect(page).toHaveScreenshot(screenshotFileName('expandable and icon variants'));
        });
      });
    });
  });
});