import { test, expect } from '@playwright/test';

test.describe('Masonry Grid Spacing', () => {
    test('should have correct spacing between notes', async ({ page }) => {
        // Go to home page
        await page.goto('/');

        // Create two notes to ensure we have content
        await page.click('input[placeholder="Take a note..."]');
        await page.fill('input[placeholder="Title"]', 'Note A');
        await page.click('button:has-text("Add")');
        await page.waitForTimeout(500);

        await page.click('input[placeholder="Take a note..."]');
        await page.fill('input[placeholder="Title"]', 'Note B');
        await page.click('button:has-text("Add")');
        await page.waitForTimeout(1000);

        // Get the first two masonry items
        const items = page.locator('.masonry-item');
        const count = await items.count();
        expect(count).toBeGreaterThanOrEqual(2);

        const item1 = items.nth(0);
        const item2 = items.nth(1);

        // Get bounding boxes
        const box1 = await item1.boundingBox();
        const box2 = await item2.boundingBox();

        if (!box1 || !box2) throw new Error('Could not get bounding boxes');

        console.log('Box 1:', box1);
        console.log('Box 2:', box2);

        // Calculate horizontal distance between centers or edges?
        // Assuming they are side-by-side in a multi-column layout on desktop

        // Check viewport size
        const viewport = page.viewportSize();
        console.log('Viewport:', viewport);

        if (viewport && viewport.width >= 1024) {
            // Should be at least 2 columns
            // Distance between left edges
            const distance = Math.abs(box2.x - box1.x);
            console.log('Distance betweeen left edges:', distance);

            // Item width
            console.log('Item 1 width:', box1.width);

            // The visual gap depends on padding if we are using the padding strategy
            // We can check the computed padding using evaluate
            const padding = await item1.evaluate((el) => {
                const style = window.getComputedStyle(el);
                return style.padding;
            });
            console.log('Computed Padding:', padding);
        }
    });

    test('should adjust columns on resize', async ({ page }) => {
        await page.goto('/');
        await page.waitForSelector('.masonry-item');

        // Desktop
        await page.setViewportSize({ width: 1280, height: 800 });
        await page.waitForTimeout(1000);
        let items = page.locator('.masonry-item');
        let box1 = await items.nth(0).boundingBox();
        console.log('1280px width - Item width:', box1?.width);

        // Mobile
        await page.setViewportSize({ width: 375, height: 667 });
        await page.waitForTimeout(1000); // Wait for resize observer
        items = page.locator('.masonry-item');
        box1 = await items.nth(0).boundingBox();
        console.log('375px width - Item width:', box1?.width);

        // Calculate expectation logic here if needed
    });
});