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

// Forklift coordinates
const forkliftCoordinates = [
  { x: 206, y: 250 },
  { x: 206, y: 281 },
  { x: 200, y: 307 },
  { x: 257, y: 251 },
  { x: 260, y: 277 },
  { x: 255, y: 304 },
];

// AGV coordinates
const agvCoordinates = [
  { x: 309, y: 325 },
  { x: 454, y: 287 },
  { x: 608, y: 282 },
  { x: 305, y: 417 },
  { x: 455, y: 424 },
  { x: 640, y: 173 },
  { x: 875, y: 227 },
  { x: 1059, y: 349 },
  { x: 977, y: 490 },
  { x: 1155, y: 492 },
];

/**
 * Common setup function for logging in and switching to full-screen mode.
 */
async function loginAndSetup(page) {
  await page.goto('http://185.100.212.76:8200');
  await page.getByPlaceholder('Email').fill('ramkumar@testdomin.local');
  await page.getByPlaceholder('Password').fill('123456');
  await page.getByRole('button', { name: 'Continue', exact: true }).click();
  console.log('Switching to full-screen mode...');
  await page.keyboard.press('F11'); // Simulate pressing F11 to enter full-screen mode
}

/**
 * Common function to move the canvas.
 */
async function moveCanvas(page) {
  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.');
  }
  const startX = canvasBox.x + canvasBox.width / 2;
  const startY = canvasBox.y + canvasBox.height / 2;
  await page.mouse.move(startX, startY);
  await page.mouse.down();
  await page.mouse.move(startX, startY + 100, { steps: 20 });
  await page.mouse.wheel(0, 500); // Scroll down 500px
  await page.mouse.up();
}

/**
 * Function to simulate dragging an asset from the panel to the canvas.
 * @param {Object} page - Playwright page object
 * @param {String} assetSelector - Selector for the asset to drag (e.g., '#forklift', '#agv')
 * @param {Array} coordinates - Array of {x, y} objects representing drop positions
 */
async function dragAssetToCanvas(page, assetSelector, coordinates) {
  console.log(`Dragging asset ${assetSelector} to canvas...`);

  // Step 1: Select the "Vehicles" category
  await page.locator('#Vehicles').click();

  // Step 2: Locate the asset and get its bounding box
  const asset = page.locator(assetSelector);
  const assetBox = await asset.boundingBox();
  if (!assetBox) {
    throw new Error(`Asset ${assetSelector} not found or not visible.`);
  }

  const assetCenterX = assetBox.x + assetBox.width / 2;
  const assetCenterY = assetBox.y + assetBox.height / 2;

  // Step 3: Drag and drop each asset to the specified coordinates
  for (const { x, y } of coordinates) {
    console.log(`Dragging asset to (${x}, ${y})`);
    await page.mouse.move(assetCenterX, assetCenterY); // Move to the center of the asset
    await page.mouse.down(); // Press the left mouse button
    await page.mouse.move(x, y, { steps: 50 }); // Smooth movement to the target
    await page.mouse.up(); // Release the left mouse button
    await page.waitForTimeout(500); // Add a small delay between drops
  }
}

/**
 * Main test case for adding Forklift and AGV assets.
 */
test('Add Forklift and AGV assets to the canvas', async ({ page }) => {
  test.setTimeout(120000); // Set timeout to 2 minutes

  // Step 1: Login and setup
  await loginAndSetup(page);

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

  // Step 3: Move the canvas to the desired position
  await moveCanvas(page);

  // Step 4: Click the toggle sidebar button
  console.log('Toggling sidebar...');
  await page.locator(".toggle-sidebar-ui-button.active").click();
  await page.waitForTimeout(2000); // Wait for the sidebar to toggle

  // Step 5: Open the "Assets" tab
  console.log('Opening the Assets tab...');
  await page.getByText('Assets').click();

  // Step 6: Add Forklift assets
  console.log('Adding Forklift assets...');
  await dragAssetToCanvas(page, '#forklift', forkliftCoordinates);

  await page.getByText('← Back').click();
  // Step 7: Add AGV assets
  console.log('Adding AGV assets...');
  await dragAssetToCanvas(page, '#agv', agvCoordinates);

  // Step 8: Take a final screenshot
  console.log('Taking a final screenshot...');
  await page.screenshot({ path: 'assets-added.png' });
  console.log('Final screenshot saved as assets-added.png');
});