import { expect, test } from '@playwright/test';

/*
 * El mapa de la portada de géneros.
 *
 * Todo lo que se comprueba aquí se ha roto al menos una vez, y ninguna de las
 * roturas daba error: el mapa seguía saliendo, solo que mal. Por eso son
 * pruebas y no una mirada.
 */
test.describe('Mapa de géneros', () => {
	test.beforeEach(async ({ page }) => {
		await page.goto('/generos');
	});

	test('los puntos se pintan después de todas las tierras', async ({ page }) => {
		// En un SVG no hay `z-index`: manda el orden en que está escrito. Con el
		// punto dentro de su país, el relleno del país siguiente se lo comía por
		// un lado y el punto salía mordido.
		const mordidos = await page.evaluate(() => {
			const fuera: string[] = [];

			for (const svg of document.querySelectorAll('svg[role="group"]')) {
				const todos = [...svg.querySelectorAll('path, circle.punto')];
				const ultimaTierra = todos.findLastIndex((e) => e.tagName === 'path');
				const primerPunto = todos.findIndex((e) => e.classList.contains('punto'));
				if (primerPunto !== -1 && primerPunto < ultimaTierra) {
					fuera.push(svg.getAttribute('aria-label') ?? '?');
				}
			}
			return fuera;
		});

		expect(mordidos).toEqual([]);
	});

	test('el punto mide lo mismo en América que en la Península', async ({ page }) => {
		// Los dos lienzos se dibujan a anchos muy distintos —seiscientas unidades
		// de encuadre uno, ciento diez el otro—, así que un radio en unidades del
		// mapa daba en España la mitad de punto.
		const medir = async (pais: string) => {
			const grupo = page.locator(`g.pais[aria-label^="${pais}"]`).first();
			const diana = (await grupo.locator('circle.golpe').boundingBox())!;
			await page.mouse.move(diana.x + diana.width / 2, diana.y + diana.height / 2);

			const punto = page.locator('circle.punto.visible').first();
			await expect(punto).toBeAttached();
			return Math.round((await punto.boundingBox())!.width);
		};

		expect(await medir('España')).toBe(await medir('México'));
	});

	test('todos los países con géneros llevan el mismo relleno', async ({ page }) => {
		// Hubo una versión con dos verdes, uno para la cuna y otro para donde solo
		// se adoptó, y España —que solo adoptó el bolero— salía de otro color que
		// el resto. Esa diferencia se cuenta en la lista, no en el mapa.
		const rellenos = await page
			.locator('g.pais:not(.elegido) path.tierra')
			.evaluateAll((es) => [...new Set(es.map((e) => getComputedStyle(e).fill))]);

		expect(rellenos).toHaveLength(1);
	});

	test('el punto solo sale en el país señalado', async ({ page }) => {
		// En reposo no hay ninguno: el mapa es de países, no de chinchetas.
		await expect(page.locator('circle.punto.visible')).toHaveCount(0);

		const grupo = page.locator('g.pais[aria-label^="Cuba"]').first();
		const diana = (await grupo.locator('circle.golpe').boundingBox())!;
		await page.mouse.move(diana.x + diana.width / 2, diana.y + diana.height / 2);

		await expect(page.locator('circle.punto.visible')).toHaveCount(1);
	});

	test('España se dibuja sin islas', async ({ page }) => {
		// Canarias caía fuera del recuadro y acababa pintada sobre América;
		// las Baleares eran cuatro píxeles sueltos al este.
		const trazados = await page
			.locator('g.pais[aria-label^="España"] path.tierra')
			.first()
			.evaluate((e) => (e.getAttribute('d')?.match(/M/g) ?? []).length);

		expect(trazados).toBe(1);
	});

	test('pulsar un país filtra la lista de géneros', async ({ page }) => {
		await page.locator('g.pais[aria-label^="Cuba"]').first().click();

		await expect(page.getByRole('heading', { name: 'Nació en Cuba' })).toBeVisible();
		await expect(page.getByRole('button', { name: /Quitar el filtro de país/ })).toBeVisible();
	});
});