import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import { sourceLink, infoLine, logos } from './utils.js';
import AbortController from 'abort-controller';

function Results() {
	const [stories, setStories] = useState(false);
	const [error, setError] = useState(false);
	const location = useLocation();

	useEffect(() => {
		const controller = new AbortController();
		const signal = controller.signal;

		const search = location.search;
		fetch('/api/search' + search, { method: 'get', signal: signal })
			.then(res => res.json())
			.then(
				(result) => {
					setStories(result.hits);
				},
				(error) => {
					if (error.message !== 'The operation was aborted. ') {
						setError(true);
					}
				}
			);

		return () => {
			controller.abort();
		};
	}, [location.search]);

	return (
		<div className='container'>
			<Helmet>
				<title>Search Results | QotNews</title>
			</Helmet>
			{error && <p>Connection error?</p>}
			{stories ?
				<>
					<p>Search results:</p>
					<div className='comment lined'>
						{stories.length ?
							stories.map(x =>
								<div className='item' key={x.id}>
									<div className='title'>
										<Link className='link' to={'/' + x.id}>
											<img className='source-logo' src={logos[x.source]} alt='source logo' /> {x.title}
										</Link>

										<span className='source'>
											({sourceLink(x)})
										</span>
									</div>

									{infoLine(x)}
								</div>
							)
						:
							<p>none</p>
						}
					</div>
				</>
			:
				<p>loading...</p>
			}
		</div>
	);
}

export default Results;