import Link from 'next/link';
import Layout from '../components/layout';
import { Site } from '../lib/site';
import SiteMap from '../public/sitemap.json';

function traverseMap(head: Site, cwd = '', depth = 0) {
    if (head.subpages === undefined)
        return [];
    let elements = [];
    for (const [slug, info] of Object.entries(head.subpages)) {
        if (slug === 'sitemap')
            continue;
        if (slug.startsWith('http://')) {
            elements.push(<>
                <dt>{info.title}</dt>
                <dd><Link href={slug}>{slug.substring(7)}</Link></dd>
            </>);
        }
        else if (slug.startsWith('https://')) {
            elements.push(<>
                <dt>{info.title}</dt>
                <dd><Link href={slug}>{slug.substring(8)}</Link></dd>
            </>);
        }
        else {
            const path = `${cwd}/${slug}`;
            const children = (<><dl style={{marginLeft: '3rem'}}> {traverseMap(info, path, depth + 1)}</dl></>);
            elements.push(<>
                    <dt>{info.title}</dt>
                    <dd><Link href={path}>paulw.xyz{path}</Link></dd>
                     {children}
            </>);
        }
    }
    return elements;
}

function SiteMapPage() {


    return <Layout>
        <dl>{traverseMap(SiteMap)}</dl>
    </Layout>;
}

export default SiteMapPage;