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

const wysiwygUrl = '/en/wysiwyg'

function snap8(v: number) { return Math.round(v / 8) * 8 }

async function getLefts(page: import('@playwright/test').Page) {
  const els = page.locator('[data-testid^="obj-text-"]')
  const count = await els.count()
  const results: number[] = []
  for (let i = 0; i < count; i++) {
    const style = await els.nth(i).evaluate((n) => (n as HTMLElement).style.left || '0')
    results.push(parseInt(style || '0', 10))
  }
  return results
}

test.describe('WYSIWYG - Group drag', () => {
  test('marquee select two items and drag group by 16px on X (snaps to grid)', async ({ page }) => {
    await page.goto(wysiwygUrl)

    const canvas = page.getByTestId('wysiwyg-canvas')
    await expect(canvas).toBeVisible()

    const addText = page.getByRole('button', { name: /^Add Text$/i })
    await addText.click()
    await addText.click()

    // Marquee select both
    const box = await canvas.boundingBox()
    if (!box) throw new Error('canvas not found')
    await page.mouse.move(box.x + 40, box.y + 40)
    await page.mouse.down()
    await page.mouse.move(box.x + 240, box.y + 160)
    await page.mouse.up()

    const live = page.getByTestId('aria-live')
    await expect(live).toContainText(/선택\s*2개/)

    const before = await getLefts(page)

    // Drag one of selected (the second) by +16 on X
    const target = page.locator('[data-testid^="obj-text-"]').nth(1)
    const tbox = await target.boundingBox()
    if (!tbox) throw new Error('target not found')
    await page.mouse.move(tbox.x + 5, tbox.y + 5)
    await page.mouse.down()
    await page.mouse.move(tbox.x + 21, tbox.y + 5) // ~+16 on X
    await page.mouse.up()

    const after = await getLefts(page)
    // Expect both moved by same snapped delta
    const expectedDx = snap8(before[1] + 16) - before[1]
    expect(after.length).toBeGreaterThanOrEqual(2)
    expect(after[0]).toBe(before[0] + expectedDx)
    expect(after[1]).toBe(before[1] + expectedDx)
  })
})