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

describe('PropsPanel', () => {
  it('edits position/size/rotate numeric fields', () => {
    const obj: WObject = { id: 'o1', type: 'image', x: 10, y: 20, width: 100, height: 80, rotate: 0, zIndex: 0, props: { src: 'a', alt: '' } }
    const calls: WObject[] = []
    const { getByLabelText } = render(<PropsPanel object={obj} onChange={(n: WObject) => calls.push(n)} />)
    fireEvent.change(getByLabelText('X'), { target: { value: '12' } })
    fireEvent.change(getByLabelText('Y'), { target: { value: '30' } })
    fireEvent.change(getByLabelText('Width'), { target: { value: '120' } })
    fireEvent.change(getByLabelText('Height'), { target: { value: '88' } })
    fireEvent.change(getByLabelText('Rotate'), { target: { value: '15' } })
    const last = calls.at(-1)!
    expect(last.x).toBe(12)
    expect(last.y).toBe(30)
    expect(last.width).toBe(120)
    expect(last.height).toBe(88)
    expect(last.rotate).toBe(15)
  })

  it('edits image src/alt', () => {
    const obj: WObject = { id: 'o2', type: 'image', x: 0, y: 0, width: 10, height: 10, rotate: 0, zIndex: 0, props: { src: 'x', alt: 'a' } }
    const calls: WObject[] = []
    const { getByLabelText } = render(<PropsPanel object={obj} onChange={(n: WObject) => calls.push(n)} />)
    fireEvent.change(getByLabelText('Src'), { target: { value: 'https://example.com/img.jpg' } })
    fireEvent.change(getByLabelText('Alt'), { target: { value: 'Example' } })
    expect(calls.at(-1)?.props).toEqual({ src: 'https://example.com/img.jpg', alt: 'Example' })
  })
})