import { describe, it, expect } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { WysiwygBuilderPage } from '@/components/wysiwyg/WysiwygBuilderPage'

function getBoxes(ids: string[]) {
  return ids.map((id) => {
    const el = screen.getByTestId(`obj-${id}`) as HTMLElement
    const s = el.style
    return {
      id,
      left: parseInt(s.left || '0', 10),
      top: parseInt(s.top || '0', 10),
      width: parseInt(s.width || '0', 10),
      height: parseInt(s.height || '0', 10),
    }
  })
}

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

async function addTextAt(x: number, y: number) {
  fireEvent.click(screen.getByRole('button', { name: /^Add Text$/i }))
  const all = await screen.findAllByTestId(/obj-text-/)
  const obj = all[all.length - 1] as HTMLElement
  // select the newly added object
  fireEvent.mouseDown(obj, { clientX: x, clientY: y })
  fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas'))
  // move via props inputs (X/Y) for the selected object
  const xInput = screen.getByLabelText('X') as HTMLInputElement
  const yInput = screen.getByLabelText('Y') as HTMLInputElement
  fireEvent.change(xInput, { target: { value: String(x) } })
  fireEvent.change(yInput, { target: { value: String(y) } })
  return obj.getAttribute('data-testid')!.replace('obj-', '')
}

describe('Canvas multiselect directional resize', () => {
  it('east handle increases width of all selected without shifting their x', async () => {
    render(<WysiwygBuilderPage />)
    const id1 = await addTextAt(60, 60)
    const id2 = await addTextAt(140, 60)

    const canvas = screen.getByTestId('wysiwyg-canvas')
    // marquee select both
    fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 })
    fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 })
    fireEvent.mouseUp(canvas)

    // wait until aria-live announces 2 selections
    const live1 = await screen.findByTestId('aria-live')
    expect(live1.textContent || '').toMatch(/선택\s*2개/)
    const before = getBoxes([id1, id2])
    const hRight = await screen.findByTestId(`resize-handle-e-${id2}`)
    fireEvent.mouseDown(hRight, { clientX: before[1].left + before[1].width, clientY: before[1].top + 5 })
    fireEvent.mouseMove(screen.getByTestId('wysiwyg-canvas'), { clientX: before[1].left + before[1].width + 16, clientY: before[1].top + 5 })
    fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas'))

    const after = getBoxes([id1, id2])
    const dw = snap8(before[1].width + 16) - before[1].width
    after.forEach((b, i) => {
      expect(b.left).toBe(before[i].left)
      expect(b.width).toBe(before[i].width + dw)
      expect(b.top).toBe(before[i].top)
      expect(b.height).toBe(before[i].height)
    })
  })

  it('west handle moves x of all selected left and increases their width equally', async () => {
    render(<WysiwygBuilderPage />)
    const id1 = await addTextAt(60, 60)
    const id2 = await addTextAt(140, 60)

    const canvas = screen.getByTestId('wysiwyg-canvas')
    fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 })
    fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 })
    fireEvent.mouseUp(canvas)
    const before = getBoxes([id1, id2])
    const hLeft = await screen.findByTestId(`resize-handle-w-${id1}`)
    fireEvent.mouseDown(hLeft, { clientX: before[0].left, clientY: before[0].top + 5 })
    fireEvent.mouseMove(screen.getByTestId('wysiwyg-canvas'), { clientX: before[0].left - 16, clientY: before[0].top + 5 })
    fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas'))

    const after = getBoxes([id1, id2])
    const right0 = before[0].left + before[0].width
    const expLeft0 = Math.min(snap8(before[0].left - 16), right0 - 8)
    const dx = expLeft0 - before[0].left
    const dw = (right0 - expLeft0) - before[0].width

    after.forEach((b, i) => {
      expect(b.left).toBe(before[i].left + dx)
      expect(b.width).toBe(before[i].width + dw)
      expect(b.top).toBe(before[i].top)
      expect(b.height).toBe(before[i].height)
    })
  })
})