import { describe, it, expect } from 'vitest';
import { render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import NameHistoryCard from './NameHistoryCard.svelte';

const aliases = [
	{ id: 'a1', lastName: 'de Gruyter', firstName: null, type: 'BIRTH', sortOrder: 0 },
	{ id: 'a2', lastName: 'Schmidt', firstName: 'Maria', type: 'WIDOWED', sortOrder: 1 }
];

describe('NameHistoryCard', () => {
	it('should render one row per alias', async () => {
		render(NameHistoryCard, { aliases, personFirstName: 'Clara' });

		await expect.element(page.getByText('de Gruyter')).toBeInTheDocument();
		await expect.element(page.getByText('Schmidt')).toBeInTheDocument();
	});

	it('should show empty state when no aliases', async () => {
		render(NameHistoryCard, { aliases: [], personFirstName: 'Clara' });

		const emptyText = document.querySelector('.italic');
		expect(emptyText).not.toBeNull();
		expect(emptyText!.textContent!.length).toBeGreaterThan(0);
	});

	it('should use personFirstName when alias firstName is null', async () => {
		render(NameHistoryCard, {
			aliases: [{ id: 'a1', lastName: 'de Gruyter', firstName: null, type: 'BIRTH', sortOrder: 0 }],
			personFirstName: 'Clara'
		});

		await expect.element(page.getByText('Clara')).toBeInTheDocument();
	});

	it('should use alias firstName when provided', async () => {
		render(NameHistoryCard, {
			aliases: [
				{ id: 'a1', lastName: 'Schmidt', firstName: 'Maria', type: 'WIDOWED', sortOrder: 0 }
			],
			personFirstName: 'Clara'
		});

		await expect.element(page.getByText('Maria')).toBeInTheDocument();
	});

	it('should show type labels', async () => {
		render(NameHistoryCard, {
			aliases: [{ id: 'a1', lastName: 'de Gruyter', firstName: null, type: 'BIRTH', sortOrder: 0 }],
			personFirstName: 'Clara'
		});

		await expect.element(page.getByText('geborene/r')).toBeInTheDocument();
	});
});
