import * as React from 'react';
import {
	vi,
	describe,
	it,
	expect,
	afterEach,
} from 'vitest';
import userEvent from '@testing-library/user-event';
import { render, screen, cleanup } from '@testing-library/react';
import matchers from '@testing-library/jest-dom/matchers';
import { Form } from '../src';

expect.extend(matchers);

describe('Form', () => {
	afterEach(() => {
		cleanup();
	});

	it('renders a form', () => {
		render(<Form aria-label="Form" />);

		const form = screen.getByRole('form');

		expect(form).toBeInTheDocument();
	});

	it('calls the submit handler on submit', async () => {
		const onSubmit = vi.fn();

		render(
			<Form onSubmit={onSubmit} aria-label="Form">
				<button type="submit">Submit</button>
			</Form>,
		);

		const button = screen.getByRole('button', { name: 'Submit' });

		await userEvent.click(button);

		expect(onSubmit).toHaveBeenCalled();
	});

	it.skip('calls the submit handler on submit with a custom component', async () => {
		// TODO
		const onSubmit = vi.fn();

		render(
			<Form onSubmit={onSubmit} aria-label="Form">
				<button type="submit">Submit</button>
			</Form>,
		);

		const button = screen.getByRole('button', { name: 'Submit' });

		await userEvent.click(button);

		expect(onSubmit).toHaveBeenCalled();
	});
});