import 'preact/debug';
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import { h, Fragment, Component, render } from 'preact';
import { GraphContainer } from './graph';
import { Menu, Discussion, Selection } from './ui';
import { UserContainer } from './user';

class SelectionContainer extends Component {
	state = {
		selection: [],
	};

	toggle = (id) => {
		const { selection } = this.state;
		if (selection.indexOf(id) < 0)
			this.setState({ selection: [ ...selection, id ] });
		else
			this.setState({ selection: selection.filter(i => i !== id) });
	}

	render() {
		return this.props.render({
			...this.state,
			toggleSelected: this.toggle,
		});
	}
}

class CollapseContainer extends Component {
	/**
	 * Contains the collapse-state for each node.
	 *
	 * - `false`: visible
	 * - `true`: implicitly hidden
	 * - `'explicit'`: explicitly hidden
	 */
	state = {};

	/**
	 * Toggle a node's collapse-state.
	 * - `false` → `'explicit'`
	 * - `true`, `'explicit'` → `false`
	 */
	toggle = (id) => {
		const { items } = this.props;

		const state = Object.assign({}, this.state);
		state[id] = state[id] ? false : 'explicit';

		this.setState(this.update(items[id], state));
	}

	/**
	 * Recursively update child node's collapse-state.
	 *
	 * If a node has parents and they are all collapsed,
	 * mark that node as implicitly hidden (`true`).
	 *
	 * Then update all of that node's children.
	 */
	update(node, state) {
		const { items } = this.props;

		if (state[node.id] !== 'explicit') {
			state[node.id] =
				node.inReplyTo.length
				&& node.inReplyTo.every(p => state[p.id]);
		}

		for (const child of node.replies)
			this.update(items[child.id], state);

		return state;
	}

	render() {
		return this.props.render({
			collapsed: this.state,
			toggleCollapsed: this.toggle,
		});
	}
}

const search = new URLSearchParams(window.location.search);
const graph = search.has('graph') ? search.get('graph') : 'lib/graph.json';

let app;
if (search.has('document') || search.has('note') || search.has('graph')) {
	const mode = search.has('document') ? "jsonld" : "mastodon";
	const url = search.get('document') || search.get('note') || search.get('graph');

	app = (
		<UserContainer>
			<GraphContainer
				url={url}
				mode={mode}
			>
				{({ loading, error, name, items }) => {
					if (loading) {
						return (
							<article>
								<div>loading...</div>
							</article>
						);
					}

					if (error) {
						return (
							<article>
								<h1>error loading</h1>
								<div>
									<p>{error.toString()}</p>
									<pre>
										<code>
											{error.stack}
										</code>
									</pre>
								</div>
							</article>
						);
					}

					return (
						<SelectionContainer render={({ selection, toggleSelected }) => (
							<>
								<CollapseContainer
									items={items}
									render={({ collapsed, toggleCollapsed }) => (
										<Discussion
											name={name}
											items={items}
											collapsed={collapsed}
											toggleCollapsed={toggleCollapsed}
											toggleSelected={toggleSelected}
										/>
									)}
								/>
								<Selection
									items={selection.map(id => items[id])}
									toggleSelected={toggleSelected}
								/>
							</>
						)} />
					);
				}}
			</GraphContainer>
		</UserContainer>
	);
} else {
	app = (
		<UserContainer>
			<Menu />
		</UserContainer>
	);
}

render(app, document.body);