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

test('DataTable data correctness test', async ({ page }) => {
    page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
    await page.goto('/test/index.html');
    await page.waitForTimeout(1000);
    
    // Check initial data
    const initialData = await page.evaluate(() => {
        const firstRow = document.querySelector('.dt-body-row');
        const cells = firstRow.querySelectorAll('.dt-cell span');
        return Array.from(cells).map(c => c.textContent);
    });
    console.log('Initial Row 1 Data:', initialData);
    expect(initialData[0]).toBe('1'); // ID column

    // Scroll down and check if data updates correctly
    const scrolledData = await page.evaluate(async () => {
        const dt = document.getElementById('myTable');
        const scrollEl = dt.querySelector('.dt-main');
        scrollEl.scrollTop = 2000; // Scroll past buffer
        scrollEl.dispatchEvent(new Event('scroll')); // Force trigger
        await new Promise(r => setTimeout(r, 200));
        
        const firstRow = document.querySelector('.dt-body-row');
        const cells = firstRow.querySelectorAll('.dt-cell span');
        return {
            scrollTop: scrollEl.scrollTop,
            listStartIndex: dt.state._listStartIndex,
            row1Data: Array.from(cells).map(c => c.textContent)
        };
    });
    
    console.log('Scrolled Data:', JSON.stringify(scrolledData, null, 2));
    
    // If scrolling worked, listStartIndex should update correctly
    expect(scrolledData.listStartIndex).toBeGreaterThan(10);
    // The ID of the first visible row should match listStartIndex + 1 (since our mock data id is i+1)
    expect(parseInt(scrolledData.row1Data[0])).toBe(scrolledData.listStartIndex + 1);
});