const { test, expect } = require('@playwright/test');
const fs = require('fs');
const path = require('path');

// Function to take screenshots at different viewport sizes for a given URL
async function takeScreenshotsAtViewports(page, folderName, screenshotPrefix) {
  const viewports = [
    { width: 1230, height: 629, name: 'moniter-spec' },
    { width: 1280, height: 800, name: 'lap-spec' },
    { width: 1920, height: 1080, name: 'TV-spec' }, 
  ];

  // Create the folder if it doesn't exist (Node.js context)
  const folderPath = path.join(__dirname, '..', 'test-results', folderName);
  if (!fs.existsSync(folderPath)) {
    fs.mkdirSync(folderPath, { recursive: true });
  }

  for (const { width, height, name } of viewports) {
    await page.setViewportSize({ width, height });
    await page.waitForTimeout(500); // Allow time for the viewport to adjust
    const screenshotPath = path.join(folderPath, `${screenshotPrefix}-${name}.png`);
    await page.screenshot({
      path: screenshotPath,
      fullPage: true,
    });
    console.log(`Screenshot taken for ${name} resolution in folder ${folderName}`);
  }
}

// test('Login Page Screenshots', async ({ page }) => {
//   test.setTimeout(60000); // Increase timeout to 60 seconds
//   const url = 'http://185.100.212.76:8200';
//   const folderName = 'login-screenshots';

//   try {
//     console.log('Navigating to the login page...');
//     await page.goto(url, { waitUntil: 'networkidle' });
//     await page.waitForSelector('[placeholder="Email"]', { timeout: 10000 });
//     await takeScreenshotsAtViewports(page, `${folderName}/login-page-loaded`, 'login-page-loaded');

//     console.log('Filling Email and Password fields...');
//     await page.getByPlaceholder('Email').click();
//     await page.getByPlaceholder('Email').fill('nalvazhuthi@hexrfactory.com');
//     await page.getByPlaceholder('Password').click();
//     await page.getByPlaceholder('Password').fill('123456');
//     await takeScreenshotsAtViewports(page, `${folderName}/fields-filled`, 'fields-filled');

//     console.log('Clicking the Continue button...');
//     await page.waitForSelector('button:has-text("Continue")', { timeout: 10000 });
//     await page.getByRole('button', { name: 'Continue', exact: true }).click();
//     await page.waitForLoadState('networkidle'); // Wait for navigation or animations to complete
//     await takeScreenshotsAtViewports(page, `${folderName}/after-login`, 'after-login');
//   } catch (error) {
//     console.error('An error occurred during the test:', error.message);
//     throw error; // Re-throw the error to fail the test
//   }
// });

// test('simulation Page Screenshots', async ({ page }) => {{

//   const folderName = 'simulation-screenshots';

//   await page.goto('http://185.100.212.76:8200');
//   await page.getByPlaceholder('Email').fill('nalvazhuthi@hexrfactory.com');
//   await page.getByPlaceholder('Password').fill('123456');
//   await page.waitForSelector('button:has-text("Continue")', { timeout: 10000 }); 
//   await page.getByRole('button', { name: 'Continue', exact: true }).click();
//   await page.getByText('Simulation').click();
//   await page.waitForTimeout(4000);
//   await takeScreenshotsAtViewports(page, `${folderName}/simulation-page-loaded`, 'simulation-page-loaded');

// }
// });

// test('Visualization Page Screenshots', async ({ page }) => {
//   const folderName = 'Visualization-screenshots';

//   // Navigate to the login page and log in
//   await page.goto('http://185.100.212.76:8200');
//   await page.getByPlaceholder('Email').fill('nalvazhuthi@hexrfactory.com');
//   await page.getByPlaceholder('Password').fill('123456');
//   await page.waitForSelector('button:has-text("Continue")', { timeout: 10000 });
//   await page.getByRole('button', { name: 'Continue', exact: true }).click();

//   // Navigate to the Visualization page
//   await page.getByText('Visualization').click();
//   await page.waitForTimeout(4000); // Wait for the page to load
//   await takeScreenshotsAtViewports(page, `${folderName}/Visualization-page1-loaded`, 'Visualization1-page-loaded');

//   // Navigate to Templates and Design pages
//   await page.locator('.toggle-header-item:has-text("Templates")').click(); // Use a more specific selector
//   await page.getByText('Design').click(); // Ensure this is unique
//   await takeScreenshotsAtViewports(page, `${folderName}/Visualization-page2-loaded`, 'Visualization2-page-loaded');
// });

// test('Market-Place Page Screenshots', async ({ page }) => {{

//   const folderName = 'simulation-screenshots';

//   await page.goto('http://185.100.212.76:8200');
//   await page.getByPlaceholder('Email').fill('nalvazhuthi@hexrfactory.com');
//   await page.getByPlaceholder('Password').fill('123456');
//   await page.waitForSelector('button:has-text("Continue")', { timeout: 10000 }); 
//   await page.getByRole('button', { name: 'Continue', exact: true }).click();
//   await page.getByText('Market Place').click();
//   await page.waitForTimeout(4000);
//   await takeScreenshotsAtViewports(page, `${folderName}/Market-Place-page-loaded`, 'Market-Place-page-loaded');

// }
// });

test('Visualization-Drag&Drop Page Screenshots', async ({ page }) => {
  const folderName = 'Visualization-screenshots';

  // Navigate to the login page and log in
  await page.goto('http://185.100.212.76:8200');
  await page.getByPlaceholder('Email').fill('nalvazhuthi@hexrfactory.com');
  await page.getByPlaceholder('Password').fill('123456');
  await page.waitForSelector('button:has-text("Continue")', { timeout: 10000 });
  await page.getByRole('button', { name: 'Continue', exact: true }).click();
  await page.getByText('Visualization').click();
  // await page.waitForTimeout(4000);
  await page.getByTitle('Activate left panel').click();
  await page.waitForTimeout(4000);
});