---
import { getLanguageFromURL } from '../../languages';
import { SIDEBAR } from '../../config';

type Props = {
  currentPage: string;
};

const { currentPage } = Astro.props as Props;
const { BASE_URL } = import.meta.env;
let currentPageMatch = currentPage.slice(BASE_URL.length, currentPage.endsWith('/') ? -1 : undefined);
const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;

const langCode = getLanguageFromURL(currentPage) || 'en';
const sidebar = SIDEBAR[langCode];
---

<nav aria-labelledby="grid-left" class="max-h-full overflow-auto pb-20 text-foreground">
  <ul>
    {
      Object.entries(sidebar).map(([header, children]) => (
        <li>
          <div class="nav-group pb-4">
            <h2>{header}</h2>
            <ul>
              {children.map((child) => {
                const url = `${baseNoTrailing}/${child.link}${child.link.endsWith('/') ? '' : '/'}`;
                return (
                  <li class="">
                    <a
                      class={`pl-4 py-0.5 w-full hover:bg-lineHighlight block${
                        currentPageMatch === child.link ? ' bg-lineHighlight' : ''
                      }`}
                      href={url}
                      aria-current={currentPageMatch === child.link ? 'page' : false}
                    >
                      {child.text}
                    </a>
                  </li>
                );
              })}
            </ul>
          </div>
        </li>
      ))
    }
  </ul>
</nav>

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