// ¿La fila coge el velo del sistema al pasar el ratón? Y si la tabla NO es
// hoverable, ¿lo coge igual? (el velo de `item` no está gated por la prop)
import { chromium } from 'playwright';

const url = process.argv[2] ?? 'http://localhost:5180/uix/components/table';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });
await page.goto(url, { waitUntil: 'networkidle' });
await page.waitForTimeout(500);
await page.addStyleTag({ content: '*, *::before, *::after { transition: none !important; }' });

const read = async (label: string) => {
	const row = page.locator('[data-table-body] [data-table-row]').first();
	const before = await row.evaluate((n) => {
		const cs = getComputedStyle(n);
		return { img: cs.backgroundImage, bg: cs.backgroundColor };
	});
	await row.hover();
	await page.waitForTimeout(120);
	const after = await row.evaluate((n) => {
		const cs = getComputedStyle(n);
		return { img: cs.backgroundImage, bg: cs.backgroundColor };
	});
	console.log(`${label}\n  reposo img: ${before.img}\n  hover  img: ${after.img}\n  hover  bg : ${after.bg}`);
	await page.mouse.move(0, 0);
	await page.waitForTimeout(120);
};

await read('CON data-hoverable (como la demo)');
await page.evaluate(() => {
	for (const r of document.querySelectorAll('[data-table-root]')) r.removeAttribute('data-hoverable');
});
await read('SIN data-hoverable (la prop apagada)');
await browser.close();