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

test('Create walls using reusable function', async ({ page }) => {
  // Setup
  const screenshotDir = 'screenshots';
  fs.mkdirSync(screenshotDir, { recursive: true });

  // 1. Navigate to the application
  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.getByRole('button', { name: 'Continue', exact: true }).click();

  // 2. Switch to full-screen mode
  console.log('Switching to full-screen mode...');
  await page.keyboard.press('F11'); // Simulate pressing F11 to enter full-screen mode

  // 3. Switch to 2D mode and select wall tool
  await page.locator('.toggle-option:has-text("2d")').click();
  await page.getByTitle('Wall').getByRole('img').click();

  // 4. Wait for the canvas to be ready
  const canvas = page.locator('canvas');
  await canvas.waitFor();

  // 5. Draw walls using reusable function
  const wallCoordinates = [
    { x: 147, y: 212 },
    { x: 138, y: 542 },
    { x: 619, y: 548 },
    { x: 614, y: 286 },
    { x: 693, y: 284 },
    { x: 696, y: 374 },
    { x: 820, y: 369 },
    { x: 823, y: 285 },
    { x: 889, y: 285 },
    { x: 899, y: 662 },
    { x: 1249, y: 661 },
    { x: 1238, y: 122 },
    { x: 142, y: 116 },
    { x: 53, y: 124 },
    { x: 147, y: 212 },
  ];

  await drawOrDeleteWalls(page, wallCoordinates, 'create');

  // 6. Take a final screenshot after drawing walls
  const afterPath = `${screenshotDir}/walls-created-fullscreen.png`;
  await page.screenshot({ path: afterPath });
  console.log(`Final screenshot saved at: ${afterPath}`);
});

test('Delete walls and 3 dots menu using reusable function', async ({ page }) => {
  // Setup
  const screenshotDir = 'screenshots';
  fs.mkdirSync(screenshotDir, { recursive: true });

  // 1. Navigate to the application
  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.getByRole('button', { name: 'Continue', exact: true }).click();

  // 2. Switch to full-screen mode
  console.log('Switching to full-screen mode...');
  await page.keyboard.press('F11'); // Simulate pressing F11 to enter full-screen mode

  // 3. Switch to 2D mode
  await page.locator('.toggle-option:has-text("2d")').click();

  // 4. Select the delete tool
  console.log('Opening three-dot menu...');
  await page.locator('.drop-down-option-button > svg').click();

  console.log('Selecting Delete option...');
  await page.locator('div').filter({ hasText: /^Delete$/ }).first().click();

  // 5. Wait for the canvas to be ready
  const canvas = page.locator('canvas');
  await canvas.waitFor();

  // 6. Delete walls using reusable function
  const wallCoordinates = [
    { x: 147, y: 212 },
    { x: 138, y: 542 },
    { x: 619, y: 548 },
    { x: 614, y: 286 },
    { x: 146, y: 343 },
    { x: 328, y: 542 },
    { x: 618, y: 459 },
    { x: 693, y: 284 },
    { x: 696, y: 374 },
    { x: 820, y: 369 },
    { x: 823, y: 285 },
    { x: 889, y: 285 },
    { x: 899, y: 662 },
    { x: 1249, y: 661 },
    { x: 1238, y: 122 },
    { x: 142, y: 116 },
    { x: 53, y: 124 },
    { x: 147, y: 212 },
  ];

  await drawOrDeleteWalls(page, wallCoordinates, 'delete');

  // 7. Delete the "3 dots" menu if it's part of the canvas
  console.log('Deleting the 3 dots menu...');
  try {
    // Attempt to locate and click the "3 dots" menu
    const threeDotsMenu = page.locator('.drop-down-option-button > svg');
    await threeDotsMenu.waitFor({ state: 'visible', timeout: 5000 }); // Ensure it's visible
    await threeDotsMenu.click(); // Click to select it
    await simulatePointerClick(page, 500, 500); // Simulate a delete action on the canvas

    console.log('Successfully deleted the 3 dots menu.');
  } catch (error) {
    console.error('Failed to delete the 3 dots menu:', error.message);
  }

  // 8. Take a final screenshot after deleting walls and the 3 dots menu
  const afterPath = `${screenshotDir}/walls-deleted-fullscreen.png`;
  await page.screenshot({ path: afterPath });
  console.log(`Final screenshot saved at: ${afterPath}`);
});

/**
 * Simulates a pointer click at specific coordinates.
 */
async function simulatePointerClick(page, x, y, button = 'left') {
  // Move to the desired position
  await page.mouse.move(x, y);

  // Simulate mouse down and up to mimic a real click
  await page.mouse.down({ button });
  await page.mouse.up({ button });
}

/**
 * Reusable function for creating or deleting walls.
 * @param {Object} page - Playwright page object
 * @param {Array} coordinates - Array of {x, y} objects representing wall points
 * @param {String} action - 'create' or 'delete'
 */
async function drawOrDeleteWalls(page, coordinates, action) {
  console.log(`${action === 'create' ? 'Creating' : 'Deleting'} walls...`);

  for (const { x, y } of coordinates) {
    console.log(`${action === 'create' ? 'Creating' : 'Deleting'} at (${x}, ${y})`);
    await simulatePointerClick(page, x, y);
  }

  if (action === 'create') {
    // Finalize wall creation with right-click
    await simulatePointerClick(page, 100, 160, 'right'); // Right-click to finalize
  }
}

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

test('Create walls after moving canvas', async ({ page }) => {
  // Setup
  const screenshotDir = 'screenshots';
  fs.mkdirSync(screenshotDir, { recursive: true });

  // 1. Navigate to the application
  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.getByRole('button', { name: 'Continue', exact: true }).click();

  // 2. Switch to full-screen mode
  console.log('Switching to full-screen mode...');
  await page.keyboard.press('F11'); // Simulate pressing F11 to enter full-screen mode

  // 3. Switch to 2D mode
  await page.locator('.toggle-option:has-text("2d")').click();

  // 4. Move the canvas to the top position
  console.log('Moving canvas to the top position...');
  const canvas = page.locator('canvas').first();
  const canvasBox = await canvas.boundingBox();

  if (!canvasBox) {
    throw new Error('Canvas bounding box not found. Ensure the canvas is visible.');
  }

  // Start position (center of canvas)
  const startX = canvasBox.x + canvasBox.width / 2;
  const startY = canvasBox.y + canvasBox.height / 2;

  // Simulate a drag action to move the canvas
  await page.mouse.move(startX, startY);
  await page.mouse.down();

  // Move the mouse down while dragging
  await page.mouse.move(startX, startY + 100, {
    steps: 20, // Smooth movement
  });

  // Simultaneously scroll the page (if needed)
  await page.mouse.wheel(0, 500); // Scroll down 500px

  await page.mouse.up();

  // 5. Select the wall tool
  console.log('Selecting wall tool...');
  await page.getByTitle('Wall').getByRole('img').click();

  // 6. Draw walls using reusable function
  const wallCoordinates = [
    { x: 147, y: 212 },
    { x: 138, y: 542 },
    { x: 619, y: 548 },
    { x: 614, y: 286 },
    { x: 693, y: 284 },
    { x: 696, y: 374 },
    { x: 820, y: 369 },
    { x: 823, y: 285 },
    { x: 889, y: 285 },
    { x: 899, y: 662 },
    { x: 1249, y: 661 },
    { x: 1238, y: 122 },
    { x: 142, y: 116 },
    { x: 53, y: 124 },
    { x: 147, y: 212 },
  ];

  await drawOrDeleteWalls(page, wallCoordinates, 'create');

  // 7. Take a final screenshot after drawing walls
  const afterPath = `${screenshotDir}/walls-created-after-moving-canvas.png`;
  await page.screenshot({ path: afterPath });
  console.log(`Final screenshot saved at: ${afterPath}`);
});

test('Delete walls after moving canvas', async ({ page }) => {
  // Setup
  const screenshotDir = 'screenshots';
  fs.mkdirSync(screenshotDir, { recursive: true });

  // 1. Navigate to the application
  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.getByRole('button', { name: 'Continue', exact: true }).click();

  // 2. Switch to full-screen mode
  console.log('Switching to full-screen mode...');
  await page.keyboard.press('F11'); // Simulate pressing F11 to enter full-screen mode

  // 3. Switch to 2D mode
  await page.locator('.toggle-option:has-text("2d")').click();

  // 4. Move the canvas to the top position
  console.log('Moving canvas to the top position...');
  const canvas = page.locator('canvas').first();
  const canvasBox = await canvas.boundingBox();

  if (!canvasBox) {
    throw new Error('Canvas bounding box not found. Ensure the canvas is visible.');
  }

  // Start position (center of canvas)
  const startX = canvasBox.x + canvasBox.width / 2;
  const startY = canvasBox.y + canvasBox.height / 2;

  // Simulate a drag action to move the canvas
  await page.mouse.move(startX, startY);
  await page.mouse.down();

  // Move the mouse down while dragging
  await page.mouse.move(startX, startY + 100, {
    steps: 20, // Smooth movement
  });

  // Simultaneously scroll the page (if needed)
  await page.mouse.wheel(0, 500); // Scroll down 500px

  await page.mouse.up();

  // 5. Open the "3 dots" menu and select the delete tool
  console.log('Opening three-dot menu...');
  await page.locator('.drop-down-option-button > svg').click();

  console.log('Selecting Delete option...');
  await page.locator('div').filter({ hasText: /^Delete$/ }).first().click();

  // Wait for the delete tool to be active
  await page.waitForTimeout(1000); // Adjust timeout if necessary

  // 6. Define specific points for deletion
  const deleteCoordinates = [
    { x: 147, y: 212 },
    { x: 138, y: 542 },
    { x: 619, y: 548 },
    { x: 614, y: 286 },
    { x: 693, y: 284 },
    { x: 696, y: 374 },
    { x: 820, y: 369 },
    { x: 823, y: 285 },
    { x: 889, y: 285 },
    { x: 899, y: 662 },
    { x: 1249, y: 661 },
    { x: 1238, y: 122 },
    { x: 142, y: 116 },
    { x: 53, y: 124 },
    { x: 147, y: 212 },
  ];

  // Delete walls using enhanced deletion function
  await enhancedDeleteWalls(page, deleteCoordinates);

  // 7. Take a final screenshot after deleting walls
  const afterPath = `${screenshotDir}/walls-deleted-after-moving-canvas.png`;
  await page.screenshot({ path: afterPath });
  console.log(`Final screenshot saved at: ${afterPath}`);
});

/**
 * Reusable function for creating or deleting walls.
 * @param {Object} page - Playwright page object
 * @param {Array} coordinates - Array of {x, y} objects representing wall points
 * @param {String} action - 'create' or 'delete'
 */
async function drawOrDeleteWalls(page, coordinates, action) {
  console.log(`${action === 'create' ? 'Creating' : 'Deleting'} walls...`);

  for (const { x, y } of coordinates) {
    console.log(`${action === 'create' ? 'Creating' : 'Deleting'} at (${x}, ${y})`);
    await simulatePointerClick(page, x, y);

    // Add a small delay between clicks to ensure proper interaction
    await page.waitForTimeout(300); // Adjust timeout if necessary
  }

  if (action === 'create') {
    // Finalize wall creation with right-click
    await simulatePointerClick(page, 100, 160, 'right'); // Right-click to finalize
  }
}

/**
 * Simulates a pointer click at specific coordinates.
 */
async function simulatePointerClick(page, x, y, button = 'left') {
  // Move to the desired position
  await page.mouse.move(x, y);

  // Simulate mouse down and up to mimic a real click
  await page.mouse.down({ button });
  await page.mouse.up({ button });
}

/**
 * Enhanced deletion function with retries, expanded click area, and success check.
 * @param {Object} page - Playwright page object
 * @param {Array} coordinates - Array of {x, y} objects representing wall points
 */
async function enhancedDeleteWalls(page, coordinates) {
  console.log('Enhanced deletion process started...');

  for (const { x, y } of coordinates) {
    let isDeleted = false;
    const maxRetries = 2; // Reduced maximum number of retries
    let retryCount = 0;

    // Attempt deletion with retries
    while (!isDeleted && retryCount < maxRetries) {
      console.log(`Attempting to delete at (${x}, ${y}), attempt ${retryCount + 1}`);

      // Expand the click area slightly to account for imprecise targeting
      const offsets = [
        { dx: 0, dy: 0 }, // Exact coordinate
        { dx: 5, dy: 0 }, // Slightly to the right
        { dx: -5, dy: 0 }, // Slightly to the left
        { dx: 0, dy: 5 }, // Slightly below
        { dx: 0, dy: -5 }, // Slightly above
      ];

      for (const { dx, dy } of offsets) {
        const adjustedX = x + dx;
        const adjustedY = y + dy;

        console.log(`Clicking at adjusted position (${adjustedX}, ${adjustedY})`);
        await simulatePointerClick(page, adjustedX, adjustedY);

        // Add a small delay between clicks to ensure proper interaction
        await page.waitForTimeout(100); // Reduced delay

        // Check if the wall is deleted (custom logic can be added here if possible)
        // For now, assume success after trying all offsets
        isDeleted = true; // Placeholder for actual deletion check
      }

      retryCount++;
    }

    if (!isDeleted) {
      console.warn(`Failed to delete wall at (${x}, ${y}) after ${maxRetries} attempts.`);
    }
  }
}
await page.locator('canvas').click({
  position: {
    x: 146,
    y: 378
  }
});
await page.locator('canvas').click({
  position: {
    x: 341,
    y: 541
  }
});
await page.locator('canvas').click({
  position: {
    x: 146,
    y: 449
  }
});
await page.locator('canvas').click({
  position: {
    x: 619,
    y: 450
  }
});
await page.locator('canvas').click({
  position: {
    x: 726,
    y: 374
  }
});
await page.locator('canvas').click({
  position: {
    x: 750,
    y: 121
  }
});


await page.getByRole('img', { name: 'forklift' }).click();
await page.getByRole('img', { name: 'forklift' }).click();
await page.locator('div').filter({ hasText: /^untitledOutlineAssets← BackVehiclesForkliftAgv$/ }).locator('svg').nth(2).click();
await page.locator('canvas').click({
  position: {
    x: 206,
    y: 250
  }
});
await page.locator('canvas').click({
  position: {
    x: 206,
    y: 281
  }
});
await page.locator('canvas').click({
  position: {
    x: 200,
    y: 307
  }
});
await page.locator('canvas').click({
  position: {
    x: 257,
    y: 251
  }
});
await page.locator('canvas').click({
  position: {
    x: 260,
    y: 277
  }
});
await page.locator('canvas').click({
  position: {
    x: 255,
    y: 304
  }
});


//values for for forklift
await page.getByRole('img', { name: 'forklift' }).click();
await page.getByRole('img', { name: 'forklift' }).click();
await page.locator('div').filter({ hasText: /^untitledOutlineAssets← BackVehiclesForkliftAgv$/ }).locator('svg').nth(2).click();
await page.locator('canvas').click({
  position: {
    x: 206,
    y: 250
  }
});
await page.locator('canvas').click({
  position: {
    x: 206,
    y: 281
  }
});
await page.locator('canvas').click({
  position: {
    x: 200,
    y: 307
  }
});
await page.locator('canvas').click({
  position: {
    x: 257,
    y: 251
  }
});
await page.locator('canvas').click({
  position: {
    x: 260,
    y: 277
  }
});
await page.locator('canvas').click({
  position: {
    x: 255,
    y: 304
  }
});


//values for for Agv
await page.locator('canvas').click({
  position: {
    x: 309,
    y: 325
  }
});
await page.locator('canvas').click({
  position: {
    x: 454,
    y: 287
  }
});
await page.locator('canvas').click({
  position: {
    x: 608,
    y: 282
  }
});
await page.locator('canvas').click({
  position: {
    x: 305,
    y: 417
  }
});
await page.locator('canvas').click({
  position: {
    x: 455,
    y: 424
  }
});
await page.locator('canvas').click({
  position: {
    x: 640,
    y: 173
  }
});
await page.locator('canvas').click({
  position: {
    x: 875,
    y: 227
  }
});
await page.locator('canvas').click({
  position: {
    x: 1059,
    y: 349
  }
});
await page.locator('canvas').click({
  position: {
    x: 977,
    y: 490
  }
});
await page.locator('canvas').click({
  position: {
    x: 1155,
    y: 492
  }
});