import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';
import Layout from '../layout';
import css from './css';
import { Links } from './Links';
import { Note } from './Note';

css`
article {
	display: flex;
	flex-direction: column;

	overflow: auto;
	flex: 1 1 auto;
}

article > div {
	position: relative;
}
`;

export const Discussion = ({
	name, items, collapsed,
	toggleCollapsed, toggleSelected,
}) => {
	const [{ width, height, positions, links }, setState] = useState({
		width: 0,
		height: 0,
		positions: {},
		links: [],
	});

	const layout = new Layout();
	const setNodeSize = layout.addNode.bind(layout);

	useEffect(() => {
		layout.render().then(setState);
	}, [ items, collapsed ]);

	return (
		<article>
			<h1>{name}</h1>
			<div>
				<Links width={width} height={height} links={links} />
				<div>
					{Object.values(items).map((item) => {
						const isCollapsed = collapsed[item.id];
						const hidden =
							item.inReplyTo.every(p => collapsed[p.id])
							&& item.replies.every(c => collapsed[c.id]);
						if (hidden)
							return;

						const onlyParent = item.inReplyTo.length === 1 && items[item.inReplyTo[0].id];

						for (const reply of item.replies) {
							if (isCollapsed && collapsed[reply.id])
								continue;

							layout.addLink(item.id, reply.id);
						}

						return (
							<Note
								{...item}
								smallHeader={
									onlyParent																			 // only one parent post
									&& onlyParent.attributedTo === item.attributedTo // posted by same user
									&& onlyParent.published === item.published			 // in the same second
								}
								collapsed={isCollapsed}
								position={positions[item.id]}
								onCollapse={toggleCollapsed}
								onSelect={toggleSelected}
								onSize={setNodeSize}
							/>
				 		);
					})}
				</div>
			</div>
		</article>
	);
};