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

vi.mock('react-moveable', () => {
  const Mock = (props: Record<string, unknown>) => <div data-testid="moveable" data-props={JSON.stringify({
    draggable: props.draggable,
    resizable: props.resizable,
    rotatable: props.rotatable,
    snappable: props.snappable,
    snapGridWidth: props.snapGridWidth,
    snapGridHeight: props.snapGridHeight,
  })} />
  return { default: Mock }
})

const frame: Frame = {
  id: 'frame1',
  width: 800,
  height: 600,
  background: '#ffffff',
  layers: [
    {
      id: 'layer1',
      name: 'Layer 1',
      visible: true,
      locked: false,
      objects: [
        { id: 'obj1', type: 'text', x: 10, y: 12, width: 100, height: 40, rotate: 0, zIndex: 0, props: { text: 'Hello', fontSize: 16, color: '#000000' } },
      ],
    },
  ],
}

describe('Canvas + Moveable integration (smoke)', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })

  it('renders Moveable with draggable/resizable/rotatable and 8px grid', () => {
    render(<Canvas frame={frame} />)

    const mv = screen.getByTestId('moveable')
    expect(mv).toBeInTheDocument()

    const props = JSON.parse(mv.getAttribute('data-props') || '{}')
    expect(props.draggable).toBe(true)
    // 현재 리사이즈는 커스텀 핸들로만 처리하므로 Moveable에는 resizable을 주지 않는다.
    expect(props.resizable).toBeUndefined()
    expect(props.rotatable).toBe(true)
    expect(props.snappable).toBe(true)
    expect(props.snapGridWidth).toBe(8)
    expect(props.snapGridHeight).toBe(8)
  })
})