import React from "react";
import { ReactiveList } from "@appbaseio/reactivesearch";
import PropTypes from "prop-types";

import ResultItem, { resultItemDetails } from "../styles/ResultItem";
import Flex, { FlexChild } from "../styles/Flex";
import Link from "../styles/Link";

function timeSince(date) {
	var seconds = Math.floor((new Date() - date) / 1000);

	var interval = Math.floor(seconds / 31536000);

	if (interval >= 1) {
		const postfix = interval === 1 ? " year" : " years";
		return interval + postfix;
	}
	interval = Math.floor(seconds / 2592000);
	if (interval > 1) {
		return interval + " months";
	}
	interval = Math.floor(seconds / 86400);
	if (interval > 1) {
		return interval + " days";
	}
	interval = Math.floor(seconds / 3600);
	if (interval > 1) {
		return interval + " hours";
	}
	interval = Math.floor(seconds / 60);
	if (interval > 1) {
		return interval + " minutes";
	}
	return Math.floor(seconds) + " seconds";
}

const onResultStats = (results, time) => (
	<Flex justifyContent="flex-end" style={{ padding: "0 1rem" }}>
		{results} results found in {time}ms
	</Flex>
);

const onData = ({ _source: data }) => (
	<ResultItem key={data.id}>
		<div dangerouslySetInnerHTML={{ __html: data.title }} />
		<div dangerouslySetInnerHTML={{ __html: data.text }} />
		<div>{JSON.stringify(data)}</div>
		<Flex className={resultItemDetails} style={{ paddingTop: 5, marginTop: 5 }}>
			{!!data.parent && (
				<FlexChild>
					parent{" "}
					<Link
						href={`https://news.ycombinator.com/item?id=${data.parent}`}
						target="_blank"
						rel="noopener noreferrer"
					>
						{data.parent}
					</Link>
				</FlexChild>
			)}
			<FlexChild>{data.score} points</FlexChild>
			<FlexChild>
				<Link
					href={`https://news.ycombinator.com/user?id=${data.by}`}
					target="_blank"
					rel="noopener noreferrer"
				>
					{data.by}
				</Link>
			</FlexChild>
			<FlexChild>{timeSince(new Date(data.time * 1000))} ago</FlexChild>
		</Flex>
	</ResultItem>
);

const Results = () => (
	<ReactiveList
		componentId="results"
		dataField="title"
		onData={onData}
		onResultStats={onResultStats}
		react={{
			and: ["title", "category"]
		}}
		pagination
	/>
);

onData.propTypes = {
	_source: PropTypes.object // eslint-disable-line
};

export default Results;

@@ -1284,44 +1284,8 @@
  /%3E%0A
-%09%09%3Cdiv%3E%7BJSON.stringify(data)%7D%3C/div%3E%0A
 %09%09%3CF

Update Results view