import EmailSuggestion from '@/components/EmailSuggestion';
import {on} from '@/scripts/event';
import {fireEvent, render} from '@testing-library/react';
import React, {useState} from 'react';
import {expect} from 'vitest';

function Wrapper() {
	const [email, setEmail] = useState('');

	return <EmailSuggestion value={email} onChange={setEmail}/>;
}

it('basic typing', () => {
	const {getByDisplayValue, queryByText} = render(<Wrapper/>);
	const input = getByDisplayValue('');

	fireEvent.input(input, {target: {value: 'abc'}});
	fireEvent.focus(input);
	expect(queryByText('abc@qq.com')).toBeInTheDocument();
	expect(queryByText('abc@163.com')).toBeInTheDocument();
	expect(queryByText('abc@gmail.com')).toBeInTheDocument();
	expect(queryByText('abc@hotmail.com')).toBeInTheDocument();

	fireEvent.input(input, {target: {value: ''}});
	expect(queryByText('abc@qq.com')).not.toBeInTheDocument();
});

it('apply suggestion', () => {
	const {getByDisplayValue, getByText} = render(<Wrapper/>);
	const input = getByDisplayValue('');

	fireEvent.input(input, {target: {value: 'abc'}});
	fireEvent.focus(input);
	fireEvent.click(getByText('abc@hotmail.com'));
	expect(input).toHaveValue('abc@hotmail.com');
});

it('do not suggest when `at` is existed', () => {
	const {getByDisplayValue, queryByText} = render(<Wrapper/>);
	const input = getByDisplayValue('');

	fireEvent.input(input, {target: {value: 'abc@outlook.com'}});
	fireEvent.focus(input);
	expect(queryByText('abc@outlook.com@qq.com')).not.toBeInTheDocument();
	expect(queryByText('abc@outlook.com@163.com')).not.toBeInTheDocument();
	expect(queryByText('abc@outlook.com@gmail.com')).not.toBeInTheDocument();
	expect(queryByText('abc@outlook.com@hotmail.com')).not.toBeInTheDocument();
});

it('display suggestions when typing with configured domain names', () => {
	const {getByDisplayValue, queryByText} = render(<Wrapper/>);
	const input = getByDisplayValue('');

	fireEvent.input(input, {target: {value: 'abc@hotmail.com'}});
	fireEvent.focus(input);
	expect(queryByText('abc@qq.com')).toBeInTheDocument();
	expect(queryByText('abc@163.com')).toBeInTheDocument();
	expect(queryByText('abc@gmail.com')).toBeInTheDocument();
	expect(queryByText('abc@hotmail.com')).toBeInTheDocument();
});

it('events', () => {
	const off = on('emailDomainsSuggestion', (names: Set<string>) => {
		names.add('outlook.com');
	});

	const {getByDisplayValue, queryByText} = render(<Wrapper/>);
	const input = getByDisplayValue('');

	fireEvent.input(input, {target: {value: 'abc'}});
	fireEvent.focus(input);
	expect(queryByText('abc@outlook.com')).toBeInTheDocument();

	off();
});