import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 950 } });
await page.goto('http://localhost:5181/en/weather/week/berlin/', { waitUntil: 'load', timeout: 120000 });
await page.waitForTimeout(12000);

const info = await page.evaluate(() => {
	const btn = document.querySelector('[data-slot="select-trigger"], button.group.min-h-12') ||
		[...document.querySelectorAll('button')].find((b) => b.className.includes('min-h-12'));
	const card = document.querySelector('.strip-cell');
	const cs = (el) => {
		const s = getComputedStyle(el);
		return { prop: s.transitionProperty, dur: s.transitionDuration, delay: s.transitionDelay };
	};
	return { button: btn ? cs(btn) : null, cardEl: card ? cs(card) : null, btnClass: btn?.className.slice(0, 120) };
});
console.log('BEFORE switch:', JSON.stringify(info, null, 1));

// flip the theme and watch when each element's background actually moves
await page.getByRole('button', { name: /^Theme: / }).click();
const samples = [];
for (let i = 0; i < 12; i++) {
	samples.push(await page.evaluate(() => {
		const btn = [...document.querySelectorAll('button')].find((b) => b.className.includes('min-h-12'));
		const card = document.querySelector('.strip-cell');
		const g = (el) => (el ? getComputedStyle(el).backgroundColor : null);
		return { t: Math.round(performance.now() % 100000), btn: g(btn), card: g(card), dur: btn ? getComputedStyle(btn).transitionDuration : null };
	}));
	await page.waitForTimeout(60);
}
console.log(JSON.stringify(samples.map((s) => `${s.btn} | ${s.card} | ${s.dur}`), null, 1));
await browser.close();