import { render, fireEvent, screen, within } from '@testing-library/svelte';
import { describe, expect, it, vi } from 'vitest';
import VorgangListPage from '$root/routes/(angemeldet)/list/+page.svelte';
import { baseData } from '../fixtures';
import { ROUTE_NAMES } from '../../src/routes';
import { actions } from '../../src/routes/(angemeldet)/list/+page.server';
import { createVorgang } from '$lib/server/vorgangService';

// mock animation features of the browser

window.HTMLElement.prototype.scrollIntoView = vi.fn();
window.HTMLElement.prototype.animate = vi.fn(() => ({
	finished: Promise.resolve(),
													cancel: vi.fn(),
}))

describe('Vorgänge Liste Page EmptyList-Komponente View', () => {
	it('zeigt EmptyList-Komponente an, wenn Liste leer ist', () => {
		const testData = { ...baseData, vorgangList: [] };
		const { getByTestId } = render(VorgangListPage, { props: { data: testData } });

		expect(getByTestId('empty-list')).toBeInTheDocument();
	});

	it('zeigt Liste(mockData 2 Elemente) an, wenn Liste vorhanden ist', () => {
		const testData = { ...baseData };
		const { getAllByTestId } = render(VorgangListPage, { props: { data: testData } });
		const items = getAllByTestId('test-list-item');

		expect(items.length).toBeGreaterThan(0);
	});
});

describe('Teste Links auf Korrektheit', () => {
	it('Überprüfe Links', () => {
		const vorgListOneItem = baseData.vorgangList.slice(0, 1);
		const vorgObj = vorgListOneItem[0];
		const expectedURL = ROUTE_NAMES.VORGANG(vorgObj.vorgangToken, vorgObj.vorgangPIN)

		render(VorgangListPage, { props: { data: { ...baseData, vorgangList: vorgListOneItem } } });
		const listItem = screen.getByTestId("test-list-item");
		const linkElement = within(listItem).getByRole('link');
		expect(linkElement).toBeInTheDocument();
		expect(linkElement).toHaveAttribute('href', expectedURL);
	});

	it('Links enthalten keinen VorgangsPIN', () => {
		const vorgListOneItem = baseData.vorgangList.slice(0, 1)

		render(VorgangListPage, { props: { data: { ...baseData, vorgangList: vorgListOneItem } } });
		const listItem = screen.getByTestId("test-list-item");
		const linkElement = within(listItem).getByRole('link');
		expect(linkElement.getAttribute('href')?.toLowerCase()).not.toContain('pin');
	});
});

async function clickPlusButton() {
	// button is visible
	const button = screen.getByTestId('expand-button')
	expect(button).toBeInTheDocument();

	await fireEvent.click(button)
}

async function inputVorgang() {
	const input = document.getElementById("vorgang");
	input.value = 'test-vorgang';
	// firing the event manually for Svelte
	await fireEvent.input(input)

	expect(input).toHaveValue('test-vorgang');
}

async function inputVorgangPIN() {
	const input = document.getElementById("pin");
	input.value = 'test-pin';
	// firing the event manually for Svelte
	await fireEvent.input(input)

	expect(input).toHaveValue('test-pin');
}


describe('Hinzufügen Buton', () => {
	it('Unexpandierter Button', () => {
		const testData = { ...baseData, vorgangList: [] };
		const { getByTestId } = render(VorgangListPage, { props: { data: testData } });

		const container = getByTestId('expand-container')
		expect(container).toBeInTheDocument();

		// button is visible
		const button = within(container).getByRole('button')
		expect(button).toBeInTheDocument();

		// input fields are not visible
		let label = screen.queryByText('Vorgangsname');
		expect(label).not.toBeInTheDocument();
	});

	it('Expandierter Button nach Klick', async () => {

		const testData = { ...baseData, vorgangList: [] };
		render(VorgangListPage, { props: { data: testData } });

		await clickPlusButton()

		// input fields are visible
		let label = screen.queryByText('Vorgangsname');
		expect(label).toBeInTheDocument();
	});

	it('Check Validation: missing PIN', async () => {

		const testData = { ...baseData, vorgangList: [] };
		render(VorgangListPage, { props: { data: testData } });

		await clickPlusButton()

		// input
		inputVorgang();

		// submit
		const button = screen.getByText('Neuen Vorgang hinzufügen')
		expect(button).toBeInTheDocument()
		await fireEvent.click(button);
		const errorMsg = 'Bitte einen Vorgangs-PIN eingeben.';
		let para = await screen.getByText(errorMsg);
		expect(para).toBeInTheDocument();
	});

	it('Create Vorgang successful', async () => {

		const testData = { ...baseData, vorgangList: [] };
		render(VorgangListPage, { props: { data: testData } });

		await clickPlusButton();

		// input fields are visible
		let label = screen.queryByText('Vorgangsname');
		expect(label).toBeInTheDocument();

		inputVorgang();
		inputVorgangPIN();

		// emulate button click
		const button = screen.getByText('Neuen Vorgang hinzufügen');
		expect(button).toBeInTheDocument();
		await fireEvent.click(button);

		// no error message
		label = screen.queryByText('Bitte');
		expect(label).not.toBeInTheDocument();
	});

	it('Test default action', async () => {
		vi.mock('$lib/server/vorgangService', () => ({
			createVorgang: vi.fn(),
		}));

		const formData = new FormData(); // no data as we are mocking createVorgang
		const mockRequest = {
			formData: vi.fn().mockResolvedValue(formData)
		};
		const event = {
			request: mockRequest,
		};

		const testVorgangToken = 'c322f26f-8c5e-4cb9-94b3-b5433bf5109e'
		vi.mocked(createVorgang).mockReturnValueOnce(testVorgangToken);
		const result = await actions.default(event);
		expect(result).toEqual({ token: testVorgangToken });
	});
});

describe('Vorgang-Operationen', () => {
	it('Teste korrekte Anzeige von Vorgang-Input Komponente', () => {
		const testData = { ...baseData};
		const { getAllByTestId } = render(VorgangListPage, { props: { data: testData } });

		let buttons = getAllByTestId('edit-button')
		expect(buttons.length).toBeGreaterThan(1);
	});
});