// @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')
	test.skip(page.url().includes('/einrichtung'), 'Instanz noch nicht eingerichtet')

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

/**
 * Eingeklappt werden die Beschriftungen nur aus dem Bild geschoben (`clip-path`
 * auf 1×1 Pixel), nicht mit `display:none` entfernt – sonst verlören die
 * Verweise ihren Namen für Vorleseprogramme. Für Playwright bleibt ein solches
 * Element „sichtbar“; geprüft wird deshalb, dass es keinen Platz mehr einnimmt.
 */
async function istWeggeschoben(beschriftung) {
	await expect.poll(async () => {
		const kasten = await beschriftung.boundingBox()
		return kasten === null ? 0 : Math.max(kasten.width, kasten.height)
	}, { message: 'Beschriftung nimmt keinen Platz mehr ein' }).toBeLessThanOrEqual(1)
}

test.describe('Seitenleiste ein- und ausklappen', () => {
	test('Klick auf die Marke schiebt die Leiste auf Symbolbreite und zurück', async ({ page }) => {
		await anmelden(page)

		const rahmen = page.locator('.rahmen')
		const marke = page.locator('[data-seitenleiste-schalter]')
		const symbol = page.locator('.marken-symbol')
		const beschriftung = page.locator('.seitenleiste .beschriftung').first()

		await expect(symbol).toBeVisible()
		await expect(beschriftung).toBeVisible()
		const breitOffen = (await page.locator('.seitenleiste').boundingBox()).width
		const hauptbereichOffen = (await page.locator('.hauptbereich').boundingBox()).width

		await marke.click()

		await expect(rahmen).toHaveClass(/eingeklappt/)
		await expect(marke).toHaveAttribute('aria-expanded', 'false')
		// Das Markensymbol und die Symbole der Menüpunkte bleiben stehen,
		// nur die Beschriftungen verschwinden.
		await expect(symbol).toBeVisible()
		await istWeggeschoben(beschriftung)
		await expect(page.locator('.seitenleiste .icon').first()).toBeVisible()

		// Der Verweis behält dabei seinen Namen – nur das Auge verliert ihn.
		await expect(page.locator('.seitenleiste a[href="/konten"]'))
			.toHaveAccessibleName(/Kontenübersicht/)

		const breitEingeklappt = (await page.locator('.seitenleiste').boundingBox()).width
		expect(breitEingeklappt).toBeLessThan(breitOffen)

		// Der Hauptbereich bekommt den gewonnenen Platz.
		expect((await page.locator('.hauptbereich').boundingBox()).width)
			.toBeGreaterThan(hauptbereichOffen)

		await marke.click()
		await expect(rahmen).not.toHaveClass(/eingeklappt/)
		await expect(marke).toHaveAttribute('aria-expanded', 'true')
		await expect(beschriftung).toBeVisible()
		expect((await page.locator('.seitenleiste').boundingBox()).width).toBe(breitOffen)
	})

	test('Die Symbole führen eingeklappt zu denselben Seiten', async ({ page }) => {
		await anmelden(page)

		await page.locator('[data-seitenleiste-schalter]').click()
		await expect(page.locator('.rahmen')).toHaveClass(/eingeklappt/)

		await page.locator('.seitenleiste a[href="/konten"]').click()
		await expect(page).toHaveURL(/\/konten/)
		await expect(page.locator('h1')).toContainText('Kontenübersicht')

		// Der Zustand hält über den Seitenwechsel hinweg – ohne Aufblitzen,
		// weil der Server ihn schon aus dem Cookie kennt.
		await expect(page.locator('.rahmen')).toHaveClass(/eingeklappt/)
		await istWeggeschoben(page.locator('.seitenleiste .beschriftung').first())

		await page.locator('[data-seitenleiste-schalter]').click()
		await expect(page.locator('.rahmen')).not.toHaveClass(/eingeklappt/)
	})
})