import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import UserProfileSection from './UserProfileSection.svelte';

afterEach(cleanup);

describe('UserProfileSection', () => {
	it('renders all four input fields by default', async () => {
		render(UserProfileSection, { props: {} });

		expect(document.querySelector('input[name="firstName"]')).not.toBeNull();
		expect(document.querySelector('input[name="lastName"]')).not.toBeNull();
		expect(document.querySelector('input[name="email"]')).not.toBeNull();
		expect(document.querySelector('input[name="birthDate"]')).not.toBeNull();
	});

	it('hydrates inputs from props when provided', async () => {
		render(UserProfileSection, {
			props: {
				firstName: 'Anna',
				lastName: 'Schmidt',
				email: 'anna@example.com',
				contact: 'Telefon 123'
			}
		});

		const first = document.querySelector('input[name="firstName"]') as HTMLInputElement;
		const last = document.querySelector('input[name="lastName"]') as HTMLInputElement;
		const email = document.querySelector('input[name="email"]') as HTMLInputElement;
		expect(first.value).toBe('Anna');
		expect(last.value).toBe('Schmidt');
		expect(email.value).toBe('anna@example.com');
	});

	it('converts the birthDate ISO value to German display format', async () => {
		render(UserProfileSection, { props: { birthDate: '1923-04-15' } });

		const dateInputs = document.querySelectorAll('input[type="text"][placeholder*="TT"]');
		expect((dateInputs[0] as HTMLInputElement).value).toBe('15.04.1923');
	});

	it('renders the hidden ISO birthDate input', async () => {
		render(UserProfileSection, { props: { birthDate: '1923-04-15' } });

		const hidden = document.querySelector('input[name="birthDate"]') as HTMLInputElement;
		expect(hidden.type).toBe('hidden');
		expect(hidden.value).toBe('1923-04-15');
	});

	it('hydrates the contact textarea from prop', async () => {
		render(UserProfileSection, { props: { contact: 'Telefon: 030-12345' } });

		const textarea = document.querySelector('textarea[name="contact"]') as HTMLTextAreaElement;
		expect(textarea.value).toBe('Telefon: 030-12345');
	});

	it('renders empty values when no props are supplied', async () => {
		render(UserProfileSection, { props: {} });

		const first = document.querySelector('input[name="firstName"]') as HTMLInputElement;
		const email = document.querySelector('input[name="email"]') as HTMLInputElement;
		expect(first.value).toBe('');
		expect(email.value).toBe('');
	});
});