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

afterEach(cleanup);

const longText = Array.from({ length: 60 }, (_, i) => `Zeile ${i + 1}.`).join('\n');
const shortText = 'Zeile 1';

describe('ExpandableText', () => {
	it('renders the supplied text inside the clamped block', async () => {
		render(ExpandableText, { props: { text: shortText, maxLines: 2 } });

		await expect.element(page.getByText('Zeile 1')).toBeVisible();
	});

	it('does not show a toggle button when the content fits inside maxLines', async () => {
		render(ExpandableText, { props: { text: shortText, maxLines: 100 } });

		await expect
			.element(page.getByRole('button', { name: /mehr anzeigen/i }))
			.not.toBeInTheDocument();
		await expect
			.element(page.getByRole('button', { name: /weniger anzeigen/i }))
			.not.toBeInTheDocument();
	});

	it('shows the "Mehr anzeigen" button when the content overflows the line clamp', async () => {
		render(ExpandableText, { props: { text: longText, maxLines: 2 } });

		await expect.element(page.getByRole('button', { name: /mehr anzeigen/i })).toBeVisible();
	});

	it('switches the toggle label to "Weniger anzeigen" after expanding', async () => {
		render(ExpandableText, { props: { text: longText, maxLines: 2 } });

		await page.getByRole('button', { name: /mehr anzeigen/i }).click();

		await expect.element(page.getByRole('button', { name: /weniger anzeigen/i })).toBeVisible();
	});

	it('collapses again when the toggle is clicked while expanded', async () => {
		render(ExpandableText, { props: { text: longText, maxLines: 2 } });

		await page.getByRole('button', { name: /mehr anzeigen/i }).click();
		await page.getByRole('button', { name: /weniger anzeigen/i }).click();

		await expect.element(page.getByRole('button', { name: /mehr anzeigen/i })).toBeVisible();
	});

	it('uses the default maxLines (10) when the prop is omitted', async () => {
		render(ExpandableText, { props: { text: shortText } });

		await expect.element(page.getByText('Zeile 1')).toBeVisible();
	});
});