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

afterEach(cleanup);

describe('UploadSaveBar', () => {
	it('shows plural label for multiple files', async () => {
		render(UploadSaveBar, { fileCount: 5, onSave: vi.fn(), onDiscard: vi.fn() });
		// "5 speichern →" or similar plural form
		await expect.element(page.getByText(/5/)).toBeInTheDocument();
	});

	it('shows singular label for one file', async () => {
		render(UploadSaveBar, { fileCount: 1, onSave: vi.fn(), onDiscard: vi.fn() });
		// "Speichern →" singular form
		await expect.element(page.getByText(/Speichern/i)).toBeInTheDocument();
	});

	it('progress bar is visible when chunkProgress is provided', async () => {
		const { container } = render(UploadSaveBar, {
			fileCount: 3,
			chunkProgress: { done: 1, total: 3 },
			onSave: vi.fn(),
			onDiscard: vi.fn()
		});
		const progress = container.querySelector('progress');
		expect(progress).not.toBeNull();
		expect(progress?.getAttribute('value')).toBe('1');
		expect(progress?.getAttribute('max')).toBe('3');
	});

	it('progress bar is not rendered when no chunkProgress', async () => {
		const { container } = render(UploadSaveBar, {
			fileCount: 2,
			onSave: vi.fn(),
			onDiscard: vi.fn()
		});
		const progress = container.querySelector('progress');
		expect(progress).toBeNull();
	});

	it('discard link is rendered', async () => {
		render(UploadSaveBar, { fileCount: 2, onSave: vi.fn(), onDiscard: vi.fn() });
		await expect.element(page.getByText(/verwerfen/i)).toBeInTheDocument();
	});
});