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

afterEach(cleanup);

describe('BulkDropZone', () => {
	it('file input has multiple attribute', async () => {
		const { container } = render(BulkDropZone, { onFilesAdded: vi.fn() });
		const input = container.querySelector('input[type="file"]');
		expect(input).not.toBeNull();
		expect(input?.hasAttribute('multiple')).toBe(true);
	});

	it('fires onFilesAdded with selected files when 3 files are picked via input', async () => {
		const onFilesAdded = vi.fn();
		render(BulkDropZone, { onFilesAdded });

		const files = [
			new File(['a'], 'a.pdf', { type: 'application/pdf' }),
			new File(['b'], 'b.pdf', { type: 'application/pdf' }),
			new File(['c'], 'c.pdf', { type: 'application/pdf' })
		];

		const input = page.getByRole('button', { name: /Dateien auswählen/i });
		await userEvent.upload(input, files);

		expect(onFilesAdded).toHaveBeenCalledOnce();
		const received: File[] = onFilesAdded.mock.calls[0][0];
		expect(received).toHaveLength(3);
		expect(received.map((f) => f.name)).toEqual(['a.pdf', 'b.pdf', 'c.pdf']);
	});

	it('shows drop hint text', async () => {
		render(BulkDropZone, { onFilesAdded: vi.fn() });
		await expect.element(page.getByText(/Dateien ablegen/i)).toBeInTheDocument();
	});
});