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

test.describe('Network & Services - Network - Overview', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/network/overview', { waitUntil: 'networkidle' });
  });

  test('Title', async ({ page }) => {
    expect(await page.title()).toBe('Difuse - Network - Overview');
  });

  test('Overview Header', async ({ page }) => {
    const header = await page.locator('.card-heaer-title');
    expect(header).toBeTruthy();
  });

  test('Notification', async ({ page }) => {
    const notification = await page.locator('.notification');
    const isVisible = await notification.isVisible();
    expect(isVisible).toBe(true);
  });

  test('WAN Label', async ({ page }) => {
    const wan = await page.$('span:has-text("WAN")');
    expect(wan).toBeTruthy();
  });

  test('SFP 1 Icon', async ({ page }) => {
    const sfp = page.locator('#sfpWanInterface');

    expect(await sfp.isVisible()).toBeTruthy();
  });

  test('WAN Icon', async ({ page }) => {
    await page.waitForSelector('#wanInterface', { visible: true });
    const wanIcon = await page.$('#wanInterface');
    const isVisible = await wanIcon.isVisible();
    expect(isVisible).toBeTruthy();
  });

  test('Lan - SFP / Ethernet Label', async ({ page }) => {
    const wan = await page.$('span:has-text("LAN - SFP / Ethernet")');
    expect(wan).toBeTruthy();
  });

  test('SFP 2', async ({ page }) => {
    const sfp = page.locator('#sfpLanInterface');

    expect(await sfp.isVisible()).toBeTruthy();
  });

  test('LAN 1, 2 ,3 and 4 Icon', async ({ page }) => {
    const lan1 = page.locator('#lan1Interface');
    const lan1Visible = await lan1.isVisible();
    expect(lan1Visible).toBeTruthy();

    await page.waitForSelector('#lan2Interface', { visible: true });
    const lan2Icon = await page.isVisible('#lan2Interface');
    expect(lan2Icon).toBeTruthy();

    await page.waitForSelector('#lan3Interface', { visible: true });
    const lan3Icon = await page.isVisible('#lan3Interface');
    expect(lan3Icon).toBeTruthy();

    await page.waitForSelector('#lan4Interface', { visible: true });
    const lan4Icon = await page.isVisible('#lan4Interface');
    expect(lan4Icon).toBeTruthy();
  });

  test('Lan - Wifi Icon', async ({ page }) => {
    await page.waitForSelector('#wlan0Interface', { visible: true });
    const wlan0 = await page.isVisible('#wlan0Interface');
    expect(wlan0).toBeTruthy();

    await page.waitForSelector('#wlan1Interface', { visible: true });
    const wlan1 = await page.isVisible('#wlan1Interface');
    expect(wlan1).toBeTruthy();

    await page.waitForSelector('#gwlan0Interface', { visible: true });
    const gwlan0 = await page.isVisible('#gwlan0Interface');
    expect(gwlan0).toBeTruthy();

    await page.waitForSelector('#gwlan1Interface', { visible: true });
    const gwlan1 = await page.isVisible('#gwlan1Interface');
    expect(gwlan1).toBeTruthy();
  });

  test('LAN - WiFi Label', async ({ page }) => {
    const wan = await page.$('span:has-text("LAN - WiFi")');
    expect(wan).toBeTruthy();
  });
});