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

test('Visualization-Drag&Drop Page', async ({ page }) => {
  test.setTimeout(60000); // Increase timeout if needed

  // Widget locators
  const BarChart = page.locator("//div[@class='chart chart-1']");
  const DotGraph = page.locator("//div[@class='chart chart-2']");
  const PieChart = page.locator("//div[@class='chart chart-3']");
  const DoughnutChart = page.locator("//div[@class='chart chart-4']");
  const SpieChart = page.locator("//div[@class='chart chart-5']");

  // Use nth() to resolve ambiguity for duplicate text elements
  const ProgressBar1 = page.getByText("Widget 7").nth(0);
  const ProgressBar2 = page.getByText("Widget 8").nth(0);

  // Panel locators
  const LeftPanel = page.locator("//div[@class='panel left-panel absolute false']");
  const BottomPanel = page.locator("//div[@class='panel bottom-panel absolute false']");
  const TopPanel = page.locator("//div[@class='panel top-panel absolute false']");
  const RightPanel = page.locator("//div[@class='panel right-panel absolute false']");

  // Navigate to the application and log in
  await page.goto('http://185.100.212.76:8200');
  await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
  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.waitForTimeout(10000); // Wait for the page to load
  await page.getByText('Visualization').click();
  await page.getByText('Zone 1').click();

  // Activate the left panel
  await page.getByTitle('Activate left panel').click();

  // Maximize the browser window to full screen
  await page.setViewportSize({ width: 1920, height: 1080 }); // Full HD resolution

  // Debugging: Take a screenshot before drag-and-drop
  await page.screenshot({ path: 'before-drag.png' });

  // Perform drag-and-drop operations
  try {
    // Drag widgets to the left panel
    await BarChart.waitFor({ state: 'visible' });
    await LeftPanel.waitFor({ state: 'visible' });
    await BarChart.dragTo(LeftPanel);
    await DotGraph.dragTo(LeftPanel);
    await PieChart.dragTo(LeftPanel);
    await DoughnutChart.dragTo(LeftPanel);

    // Activate the right panel and drag widgets
    await page.getByTitle('Activate right panel').click();
    await RightPanel.waitFor({ state: 'visible' });
    await DoughnutChart.dragTo(RightPanel);
    await SpieChart.dragTo(RightPanel);
    await ProgressBar1.dragTo(RightPanel);
    await ProgressBar2.dragTo(RightPanel);

    // Activate the bottom panel and drag widgets
    await page.getByTitle('Activate bottom panel').click();
    await BottomPanel.waitFor({ state: 'visible' });
    await ProgressBar2.dragTo(BottomPanel);
    await PieChart.dragTo(BottomPanel);
    await DotGraph.dragTo(BottomPanel);
    await BarChart.dragTo(BottomPanel);

    // Activate the top panel and drag widgets
    await page.getByTitle('Activate top panel').click();
    await TopPanel.waitFor({ state: 'visible' });
    await DoughnutChart.dragTo(TopPanel);
    await SpieChart.dragTo(TopPanel);
    await ProgressBar1.dragTo(TopPanel);
    await ProgressBar2.dragTo(TopPanel);
  } catch (error) {
    console.error('Drag-and-drop operation failed:', error.message);
    throw error; // Rethrow the error to fail the test
  }

  // Wait for panels to update dynamically
  await page.waitForFunction(() => {
    const leftPanel = document.querySelector('.left-panel');
    const rightPanel = document.querySelector('.right-panel');
    const bottomPanel = document.querySelector('.bottom-panel');
    const topPanel = document.querySelector('.top-panel');
    return (
      leftPanel.children.length > 0 &&
      rightPanel.children.length > 0 &&
      bottomPanel.children.length > 0 &&
      topPanel.children.length > 0
    );
  });

  // Debugging: Take a screenshot after drag-and-drop
  await page.screenshot({ path: 'after-drag.png' });

  console.log('Drag-and-drop completed successfully.');
});