// @ts-check
const { test, expect } = require('@playwright/test')

const BENUTZER = process.env.E2E_USER || 'e2e'
const PASSWORT = process.env.E2E_PASSWORD || 'e2e-testpasswort'

async function anmelden(page) {
	await page.goto('/login')
	await page.fill('#benutzername', BENUTZER)
	await page.fill('#passwort', PASSWORT)
	await page.click('button[type="submit"]')
	await expect(page).toHaveURL(/\/$/)
}

test.describe('Kippschalter', () => {
	test.beforeEach(async ({ page }) => {
		await anmelden(page)
	})

	test('Ankreuzfelder erscheinen als Schalter und lassen sich umschalten', async ({ page }) => {
		await page.goto('/konten/neu')
		const schalter = page.locator('input[name="in_summe"]')

		const aussehen = () => schalter.evaluate((el) => {
			const stil = getComputedStyle(el)
			return { breite: parseFloat(stil.width), hintergrund: stil.backgroundColor, appearance: stil.appearance }
		})

		const vorher = await aussehen()
		expect(vorher.appearance).toBe('none')
		expect(vorher.breite).toBeGreaterThan(30)

		const war = await schalter.isChecked()
		await schalter.click()
		expect(await schalter.isChecked()).toBe(!war)
		// Die Farbe läuft über eine kurze Übergangsanimation.
		await expect.poll(async () => (await aussehen()).hintergrund).not.toBe(vorher.hintergrund)
	})

	test('Zeilenauswahl in den Listen bleibt ein gewöhnliches Ankreuzfeld', async ({ page }) => {
		await page.goto('/banking/umsaetze')
		const auswahl = page.locator('input.alle-waehlen').first()
		if (await auswahl.count() === 0) {
			test.skip(true, 'keine Umsätze vorhanden')
		}
		const appearance = await auswahl.evaluate((el) => getComputedStyle(el).appearance)
		expect(appearance).not.toBe('none')
	})
})