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

const frame: Frame = {
  id: 'f-marquee',
  width: 500,
  height: 400,
  background: '#fff',
  layers: [
    { id: 'l1', name: 'L1', visible: true, locked: false, objects: [
      { id: 'o1', type: 'text', x: 10, y: 10, width: 40, height: 30, rotate: 0, zIndex: 3, props: { text: 'A', fontSize: 16, color: '#000' } },
      { id: 'o2', type: 'text', x: 80, y: 12, width: 40, height: 30, rotate: 0, zIndex: 2, props: { text: 'B', fontSize: 16, color: '#000' } },
      { id: 'o3', type: 'text', x: 200, y: 100, width: 40, height: 30, rotate: 0, zIndex: 1, props: { text: 'C', fontSize: 16, color: '#000' } },
    ]}
  ]
}

describe('Canvas marquee multi-select', () => {
  it('selects objects intersecting the marquee rectangle', () => {
    render(<Canvas frame={frame} />)
    const canvas = screen.getByTestId('wysiwyg-canvas')

    // 캔버스 빈 공간에서 드래그 박스(마퀴) 생성: (5,5)→(130,50)
    fireEvent.mouseDown(canvas, { clientX: 5, clientY: 5 })
    fireEvent.mouseMove(canvas, { clientX: 130, clientY: 50 })
    fireEvent.mouseUp(canvas)

    const o1 = screen.getByTestId('obj-o1')
    const o2 = screen.getByTestId('obj-o2')
    const o3 = screen.getByTestId('obj-o3')

    expect(o1).toHaveStyle({ outline: '2px solid #0ea5e9' })
    expect(o2).toHaveStyle({ outline: '2px solid #0ea5e9' })
    expect(o3).toHaveStyle({ outline: 'none' })
  })
})