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

afterEach(cleanup);

describe('OcrTrigger', () => {
	it('renders the script-type select and the trigger button', async () => {
		render(OcrTrigger, {
			props: { blockCount: 1, storedScriptType: 'HANDWRITING_KURRENT', onTrigger: () => {} }
		});

		await expect.element(page.getByRole('combobox')).toBeVisible();
		await expect.element(page.getByRole('button')).toBeVisible();
	});

	it('initialises the select with the stored script type when provided', async () => {
		render(OcrTrigger, {
			props: { blockCount: 1, storedScriptType: 'HANDWRITING_KURRENT', onTrigger: () => {} }
		});

		const select = (await page.getByRole('combobox').element()) as HTMLSelectElement;
		expect(select.value).toBe('HANDWRITING_KURRENT');
	});

	it('starts with an empty selection when storedScriptType is UNKNOWN', async () => {
		render(OcrTrigger, {
			props: { blockCount: 1, storedScriptType: 'UNKNOWN', onTrigger: () => {} }
		});

		const select = (await page.getByRole('combobox').element()) as HTMLSelectElement;
		expect(select.value).toBe('');
	});

	it('disables the trigger button when no script type is selected', async () => {
		render(OcrTrigger, {
			props: { blockCount: 1, storedScriptType: 'UNKNOWN', onTrigger: () => {} }
		});

		const btn = (await page.getByRole('button').element()) as HTMLButtonElement;
		expect(btn.disabled).toBe(true);
	});

	it('disables the trigger button when blockCount is 0 even if a script type is selected', async () => {
		render(OcrTrigger, {
			props: { blockCount: 0, storedScriptType: 'HANDWRITING_KURRENT', onTrigger: () => {} }
		});

		const btn = (await page.getByRole('button').element()) as HTMLButtonElement;
		expect(btn.disabled).toBe(true);
	});

	it('shows the no-annotations hint when blockCount is 0', async () => {
		render(OcrTrigger, {
			props: { blockCount: 0, storedScriptType: 'HANDWRITING_KURRENT', onTrigger: () => {} }
		});

		await expect
			.element(page.getByText('Zeichnen Sie zuerst Bereiche auf dem Dokument ein.'))
			.toBeVisible();
	});

	it('omits the no-annotations hint when blockCount is greater than 0', async () => {
		render(OcrTrigger, {
			props: { blockCount: 5, storedScriptType: 'HANDWRITING_KURRENT', onTrigger: () => {} }
		});

		await expect
			.element(page.getByText('Zeichnen Sie zuerst Bereiche auf dem Dokument ein.'))
			.not.toBeInTheDocument();
	});

	it('calls onTrigger with the selected script type and useExistingAnnotations=true', async () => {
		const onTrigger = vi.fn();
		render(OcrTrigger, {
			props: { blockCount: 5, storedScriptType: 'HANDWRITING_KURRENT', onTrigger }
		});

		await page.getByRole('button').click();

		expect(onTrigger).toHaveBeenCalledWith('HANDWRITING_KURRENT', true);
	});

	it('does not call onTrigger when no script type is selected', async () => {
		const onTrigger = vi.fn();
		render(OcrTrigger, {
			props: { blockCount: 5, storedScriptType: 'UNKNOWN', onTrigger }
		});

		await page.getByRole('button').click({ force: true });

		expect(onTrigger).not.toHaveBeenCalled();
	});
});