function getSections() {
	const toc = [];
	const sections = Array.from(document.querySelectorAll('.header-text'));
	for (let i = 0; i < sections.length; i += 1) {
		let section = sections[i];
		console.log(section.tagName)
		if (section.tagName.toLowerCase() == 'h2') {
			toc.push({ section: section.id, subSections: [] });
		} else {
			toc.at(-1).subSections.push(section.id);
		}
	}
	return toc;
}

function Pages(props) {
	const page = props.page;
	const setPosts = props.setPosts;
	const setPage = props.setPage;
	let pages = [];
	const before = page - Math.max(page - 2, 0);
	const after = Math.min(page + 2, totalPages - 1) - page;
	for (let i = before; i >= -after; i--) {
		pages.push(
			<li key={i} className="page-item">
				<a href="#" className="page-link waves-effect" onClick={() => getPosts(page - i, setPosts, setPage)}>
					{page - i + 1}
				</a>
			</li>
		);
	}
	return pages;
}

function TOC() {
	const sections = getSections();
	console.log(sections);
	let rows = [];
	for (let section of sections) {
		let subSections = [];
		for (let subSection of section.subSections) {
			subSections.push(<li key={subSection}><a href={"#" + subSection}>{subSection}</a></li>);
		}
		let sectionRow = (<li key={section.section}>
				<a href={"#" + section.section}>{section.section}</a>
				<ol>
					{subSections}
				</ol>
			</li>
		);
		rows.push(sectionRow);
	}
	if (rows.length > 0) {
		return (
			<div className="alert alert-dark" role="alert" data-mdb-color="dark">
				<h4> Jump to: </h4>
				<hr />
				<ol>
					{rows}
				</ol>
			</div>
		);
	}
}


ReactDOM.render(<TOC />, document.querySelector('.toc'));