import { chromium } from 'playwright';
const BASE = process.env.BASE_URL ?? 'http://localhost:5173';
const b = await chromium.launch();
const ctx = await b.newContext({ viewport: { width: 1280, height: 900 } });
const p = await ctx.newPage();
await p.goto(BASE + '/uix/components/toggle', { waitUntil: 'networkidle' });
await p.waitForTimeout(500);

// Click intent=affirm + pressed=true
await p.locator('button[data-uix-chip]:has-text("affirm")').first().click();
await p.locator('span[data-uix-switch] input[type="checkbox"]').first().check();
await p.waitForTimeout(200);

const css = await p
	.locator('[data-toggle]')
	.first()
	.evaluate((el: Element) => {
		const cs = getComputedStyle(el);
		return {
			dataColor: el.getAttribute('data-color'),
			dataState: el.getAttribute('data-state'),
			bg: cs.backgroundColor,
			palette_solid: cs.getPropertyValue('--toggle-palette-solid').trim(),
			palette_track: cs.getPropertyValue('--toggle-palette-track').trim(),
			palette_text: cs.getPropertyValue('--toggle-palette-text').trim(),
			toggle_solid_on_bg: cs.getPropertyValue('--toggle-solid-on-bg').trim(),
			_toggle_on_bg: cs.getPropertyValue('--_toggle-on-bg').trim(),
			toggle_color_affirm_solid: cs.getPropertyValue('--toggle-color-affirm-solid').trim(),
			color_affirm_solid: cs.getPropertyValue('--color-affirm-solid').trim(),
			primitive_affirm_9: cs.getPropertyValue('--primitive-affirm-9').trim(),
			scale_teal_9: cs.getPropertyValue('--scale-teal-9').trim()
		};
	});
console.log(JSON.stringify(css, null, 2));
await b.close();