import { expect, test } from '@playwright/experimental-ct-vue'
import DraggableBlock from '@/components-v2/shared/DraggableBlock.vue'

test('drag past threshold emits dragstart then dragend with delta @ct', async ({ mount }) => {
  const events: string[] = []

  const component = await mount(DraggableBlock, {
    props: { line1Left: { text: 'DJ Foo' } },
    on: {
      dragstart: () => events.push('dragstart'),
      dragend: (d: { x: number; y: number }) => events.push(`dragend:${d.x},${d.y}`),
      click: () => events.push('click'),
    },
  })

  const box = (await component.boundingBox())!

  await component.page().mouse.move(box.x + 10, box.y + 10)
  await component.page().mouse.down()
  await component.page().mouse.move(box.x + 40, box.y + 22)
  await component.page().mouse.up()
  expect(events[0]).toBe('dragstart')
  expect(events.some(e => e.startsWith('dragend:'))).toBe(true)
  expect(events).not.toContain('click')
})

test('static states render for @visual baseline @visual', async ({ mount }) => {
  const component = await mount(DraggableBlock, {
    props: {
      line1Left: { text: 'DJ Foo', tag: { label: 'confirmed', severity: 'success' } },
      line1Right: { pill: 'Main' },
      line2Left: '21:00–22:00',
      line2Right: { progress: 60 },
      selected: true,
    },
  })

  await expect(component).toHaveScreenshot('draggableblock-selected.png')
})