import {test, expect} from '@playwright/test';

var urls = ['https://www.lasercomponents.com/de/', 'https://www.lasercomponents.com/de-en/', 'https://www.lasercomponents.com/fr/'];
if (process.env.URLS !== undefined && process.env.URLS.length > 0) {
  urls = process.env.URLS.split(' ');
}



  for (const url of urls) {
  test.describe(`Tests for ${url}`, () => {
    test.beforeEach(async ({page}) => {
      test.setTimeout(5000)
      await page.goto(url);

      // consent dialog wegklicken
      await page.getByTestId('uc-deny-all-button').click();
    });

    test.describe('Mobile Viewport', () => {
      test.use({
        viewport: {width: 1280, height: 768}
      });

      test('Mobile Product Navi', async ({page}) => {

        // check if the mobile nav is visible
        await page.locator('#toggleMobileNav').click();

        // check if the mainNav is visible
        await expect(page.locator('#mainNav')).toBeVisible();
        // wait until nav ajax is loaded
        await expect(page.locator('.m-mainNav__level0 i.lci-angle-right:first-of-type').first()).not.toHaveClass('loading', {timeout: 300});
        // click on first next nav level icon
        await page.locator('.m-mainNav__level0 i.lci-angle-right:first-of-type').first().click();

        // click if level 1 is visible
        await expect(page.locator('.m-mainNav__level1.-active')).toBeVisible();


      });
    });

    test.describe('Desktop Viewport', () => {
      test.use({viewport: {width: 1920, height: 1080}});

      test('desktop product nav available', async ({page}) => {

        await page.locator('.m-mainNav__level0 a').first().hover();
        await page.locator('.m-mainNav__level0 li:first-child ').first().hover();

        await expect(page.locator('.m-mainNav__level1.-active')).toBeVisible();

        // Öffnen der zweiten Navi Ebene
        await page.locator('.m-mainNav__level1.-active > .m-mainNav__hasSub').first().hover();
        await expect(page.locator('.m-mainNav__level2.-active')).toBeVisible();
      });

      test('offCanvas available', async ({page}) => {

        const offCanvasContactForm = await page.locator('#form-content form');
        await page.locator('li[data-offcanvas-target="#contactUsForm"]').click();
        // Field 'Position' exists in every language
        await expect(offCanvasContactForm.getByPlaceholder('Position')).toBeVisible();

        await offCanvasContactForm.getByRole('button').scrollIntoViewIfNeeded();
        await expect(offCanvasContactForm.getByRole('button')).toBeVisible();

        await page.locator('li[data-offcanvas-target="#teamOfExperts"]').click();
        await expect(page.locator('#teamOfExperts .m-contact-person').first().getByRole('img')).toBeVisible();
      });
    });
  });
}
