// @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(/\/$/)
}

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

		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 expect(beschriftung).toBeHidden()
		await expect(page.locator('.seitenleiste .icon').first()).toBeVisible()

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

		// Der Hauptbereich bekommt den gewonnenen Platz.
		const hauptOffen = breitOffen
		expect((await page.locator('.hauptbereich').boundingBox()).width).toBeGreaterThan(0)

		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(hauptOffen)
	})

	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 expect(page.locator('.seitenleiste .beschriftung').first()).toBeHidden()

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