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

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

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

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

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

          test('hover & focus', async ({ mount, page }) => {
            await mount(
              <div className="nj-tabs">
                <NJNavigationTab>Default</NJNavigationTab>
                <NJNavigationTab>Hovered</NJNavigationTab>
                <NJNavigationTab>Focused</NJNavigationTab>
              </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: 220, height: 60 } });

          test('pressed', async ({ mount, page }) => {
            await mount(
              <div className="nj-tabs">
                <NJNavigationTab>Default</NJNavigationTab>
                <NJNavigationTab>Pressed</NJNavigationTab>
              </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: 680, height: 100 } });

        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: 680, height: 100 } });

        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: 850, height: 100 } });

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

      test.describe('expanded', () => {
        test.use({ viewport: { width: 680, height: 100 } });

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

      test.describe('expanded with icon', () => {
        test.use({ viewport: { width: 850, height: 100 } });

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

      test.describe('selected', () => {
        test.use({ viewport: { width: 530, height: 100 } });

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

      test.describe('selected with icon', () => {
        test.use({ viewport: { width: 690, height: 100 } });

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