import { test, expect, Page } from "@playwright/test"

function nextFrame(page: Page) {
    return page.evaluate(
        () => new Promise((resolve) => requestAnimationFrame(resolve))
    )
}

test.describe("Drag Constraints", () => {
    test.beforeEach(async ({ page }) => {
        await page.goto("/vue/drag-constraints")
    })

    test("draggable element stays within constraints, with elastic applied", async ({
        page,
    }) => {
        const container = page.locator("#sandbox .container")
        const draggable = page.locator("#sandbox .box")

        const containerBox = await container.boundingBox()
        const draggableBox = await draggable.boundingBox()

        if (!containerBox || !draggableBox) {
            throw new Error("Could not get element boundaries")
        }

        // Start drag with pointerdown
        await draggable.dispatchEvent("pointerdown", {
            isPrimary: true,
            clientX: containerBox.x,
            clientY: containerBox.y,
        })

        await nextFrame(page)

        // Try to drag beyond right and bottom boundary
        await page.dispatchEvent("body", "pointermove", {
            isPrimary: true,
            clientX: containerBox.x + containerBox.width + 100,
            clientY: containerBox.y + containerBox.height + 100,
        })

        await nextFrame(page)

        // Release pointer
        await page.dispatchEvent("body", "pointerup", { isPrimary: true })

        // Check position after drag
        const finalBox = await draggable.boundingBox()
        if (!finalBox) {
            throw new Error("Could not get final position")
        }

        // Verify element stays within right and bottom constraints with 0.2 elastic
        const elasticOffset = 100 * 0.2 // 20% of the 100px drag beyond boundary
        const maxRightPosition =
            containerBox.x +
            containerBox.width -
            draggableBox.width / 2 +
            elasticOffset
        const maxBottomPosition =
            containerBox.y +
            containerBox.height -
            draggableBox.height / 2 +
            elasticOffset

        expect(finalBox.x).toBeLessThanOrEqual(maxRightPosition)
        expect(finalBox.y).toBeLessThanOrEqual(maxBottomPosition)
    })

    test("draggable snaps back when released outside constraints", async ({
        page,
    }) => {
        const container = page.locator("#sandbox .container")
        const draggable = page.locator("#sandbox .box")

        const initialBox = await draggable.boundingBox()
        const containerBox = await container.boundingBox()

        if (!initialBox || !containerBox) {
            throw new Error("Could not get element boundaries")
        }

        // Start drag with pointerdown
        await draggable.dispatchEvent("pointerdown", {
            isPrimary: true,
            clientX: initialBox.x + initialBox.width / 2,
            clientY: initialBox.y + initialBox.height / 2,
        })

        await nextFrame(page)

        // Try to drag far outside constraints
        await page.dispatchEvent("body", "pointermove", {
            isPrimary: true,
            clientX: 1000,
            clientY: 1000,
        })

        await nextFrame(page)

        // Release pointer
        await page.dispatchEvent("body", "pointerup", { isPrimary: true })

        // Wait for any animations to complete
        await page.waitForTimeout(2000)

        const finalBox = await draggable.boundingBox()
        if (!finalBox) {
            throw new Error("Could not get final position")
        }

        expect(finalBox.x).toBeGreaterThanOrEqual(containerBox.x)
        expect(finalBox.y).toBeGreaterThanOrEqual(containerBox.y)
    })
})