import { describe, it, expect } from 'vitest'
import { render, fireEvent } from '@testing-library/react'
import { Canvas } from '@/components/wysiwyg/Canvas'
import type { Frame } from '@/lib/wysiwyg/schema'

function makeFrame(): Frame {
  return {
    id: 'f1',
    width: 400,
    height: 300,
    background: '#ffffff',
    layers: [
      {
        id: 'l1',
        name: 'L1',
        visible: true,
        locked: false,
        objects: [
          { id: 'o1', type: 'image', x: 101, y: 100, width: 50, height: 40, rotate: 0, zIndex: 0, props: { src: 'x', alt: '' } },
        ],
      },
    ],
  }
}

describe('WYSIWYG Canvas keyboard nudge with 8px snap', () => {
  it('ArrowRight nudges and snaps x to nearest 8px grid', () => {
    const frame = makeFrame()
    const { getByTestId } = render(<Canvas frame={frame} />)
    const canvas = getByTestId('wysiwyg-canvas')
    fireEvent.keyDown(canvas, { key: 'ArrowRight' })
    const obj = getByTestId('obj-o1')
    expect(obj).toHaveStyle({ left: '104px' }) // 101 + 1 => 102 -> snap8 => 104
  })

  it('ArrowUp nudges and snaps y to nearest 8px grid', () => {
    const frame = makeFrame()
    const { getByTestId } = render(<Canvas frame={frame} />)
    const canvas = getByTestId('wysiwyg-canvas')
    fireEvent.keyDown(canvas, { key: 'ArrowUp' })
    const obj = getByTestId('obj-o1')
    expect(obj).toHaveStyle({ top: '96px' }) // 100 - 1 => 99 -> snap8 => 96
  })
})