---
import Sponsors from './Sponsors.astro';
import { SIDEBAR } from '../../config.ts';
import { getLanguageFromURL, removeLeadingSlash, removeTrailingSlash } from '../../util.ts';
import SidebarContent from './SidebarContent.astro';
import SidebarSectionToggle from './SidebarSectionToggle.tsx';
const { currentPage } = Astro.props;
// Get the slug w/o a leading or trailing slash
const currentPageMatch = removeLeadingSlash(removeTrailingSlash(currentPage));
const langCode = getLanguageFromURL(currentPage);
// SIDEBAR is a flat array. Group it by sections to properly render.
const sidebarSections = SIDEBAR[langCode].reduce((collection, item) => {
	if (item.header) {
		collection.push({ ...item, type: item.type, children: [] });
	} else {
		collection[collection.length - 1].children.push(item);
	}
	return collection;
}, []);

const learnSections = sidebarSections.filter((section) => section.type === 'learn');
const apiSections = sidebarSections.filter((section) => section.type === 'api');
let activeTab = 'learn';
for (const section of sidebarSections) {
	if (section.children.some((item) => item.link === currentPageMatch)) {
		activeTab = section.type;
	}
}
---

<nav aria-labelledby="grid-left">
	<SidebarSectionToggle client:load defaultActiveTab={activeTab} />
	<ul class={`nav-groups`}>
		<SidebarContent type={'learn'} defaultActiveTab={activeTab} sidebarSections={learnSections} {currentPageMatch} />
		<SidebarContent type={'api'} defaultActiveTab={activeTab} sidebarSections={apiSections} {currentPageMatch} />
		<li>
			<Sponsors />
		</li>
	</ul>
</nav>

<script>
	window.addEventListener('DOMContentLoaded', (event) => {
		var target = document.querySelector('[aria-current="page"]');
		if (target && target.offsetTop > window.innerHeight - 100) {
			document.querySelector('.nav-groups').scrollTop = target.offsetTop;
		}
	});
</script>

<style lang="scss">
	nav {
		width: 100%;
		margin-right: 1rem;
		padding-top: 0rem;
	}
	.nav-groups {
		height: 100%;
		overflow-x: visible;
		overflow-y: auto;
		max-height: 100vh;
		padding-bottom: var(--theme-navbar-height);
	}
</style>