import React, { useState, useRef } from 'react';
import { useHistory } from 'react-router-dom';

function Submit() {
	const [progress, setProgress] = useState(null);
	const inputRef = useRef(null);
	const history = useHistory();

	const submitArticle = async (event) => {
		event.preventDefault();
		const url = event.target[0].value;
		inputRef.current.blur();

		setProgress('Submitting...');

		let data = new FormData();
		data.append('url', url);

		try {
			const res = await fetch('/api/submit', { method: 'POST', body: data });

			if (res.ok) {
				const result = await res.json();
				history.replace('/' + result.nid);
			} else {
				let errorData;
				try {
					errorData = await res.json();
				} catch (jsonError) {
					// Not a JSON error from our API, so it's a server issue
					throw new Error(`Server responded with ${res.status} ${res.statusText}`);
				}
				setProgress(errorData.error || 'An unknown error occurred.');
			}
		} catch (error) {
			setProgress(`Error: ${error.toString()}`);
		}
	}

	return (
		<span className='search'>
			<form onSubmit={submitArticle}>
				<input
					placeholder='Submit URL'
					ref={inputRef}
				/>
			</form>
			{progress && <p>{progress}</p>}
		</span>
	);
}

export default Submit;