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

describe('WYSIWYG Builder - Guides UI toggle', () => {
  it('shows guides by default, and hides when toggle is off', async () => {
    render(<WysiwygBuilderPage />)

    // add a text and select it (exact match to avoid matching 'Add Textarea')
    fireEvent.click(screen.getByRole('button', { name: /^Add Text$/i }))
    const obj = await screen.findByTestId(/obj-text-/)
    fireEvent.mouseDown(obj, { clientX: 80, clientY: 80 })

    // default ON: start drag -> guides should appear
    const canvas = screen.getByTestId('wysiwyg-canvas')
    fireEvent.mouseDown(obj, { clientX: 120, clientY: 120 })
    fireEvent.mouseMove(canvas, { clientX: 124, clientY: 124 })
    expect(await screen.findByTestId('guide-x')).toBeInTheDocument()

    // end drag, then turn OFF and verify guides disappear on further movement
    const btn = screen.getByRole('button', { name: /Guides/i })
    fireEvent.mouseUp(canvas)
    fireEvent.click(btn)
    fireEvent.mouseMove(canvas, { clientX: 132, clientY: 132 })
    expect(screen.queryByTestId('guide-x')).toBeNull()
  })
})