---
import type { MarkdownHeading } from 'astro';

interface Props {
    headings: MarkdownHeading[];
}

const { headings } = Astro.props;


const filteredHeadings = headings.filter((heading) => heading.depth <= 3);

// github.com/rezahedi/rezahedi.dev/blob/main/src/components/TOC.astro
function buildHierarchy(headings: MarkdownHeading[]) {
    const toc: any[] = [];
    const parentHeadings = new Map();

    if (!headings)
        return toc;

    headings.forEach((h: any) => {
        const heading = { ...h, subheadings: [] };
        parentHeadings.set(heading.depth, heading);
        // Change 2 to 1 if your markdown includes your <h1>
        if (heading.depth === 2) {
            toc.push(heading);
        } else {
            parentHeadings.get(heading.depth - 1)?.subheadings.push(heading);
        }
    });
    return toc;
}

const toc = buildHierarchy(filteredHeadings);
---
<details>
    <summary>Table of Contents</summary>
    <ul class="toc-list">
        {
            toc.map((heading) => (
                <li class={`depth-${heading.depth}`} style={`margin-left: ${(heading.depth - 1)}rem;`}>
                    <a href={`#${heading.slug}`}>{heading.text}</a>
                    {
                        heading.subheadings.length > 0 && (
                            <ul>
                                {
                                    heading.subheadings.map((subheading) => (
                                        <li class={`depth-${subheading.depth}`} style={`margin-left: ${(subheading.depth - 1)}rem;`}>
                                            <a href={`#${subheading.slug}`}>{subheading.text}</a>
                                            {subheading.subheadings.length > 0 && (
                                                <ul>
                                                    {
                                                        subheading.subheadings.map((subSubheading) => (
                                                            <li class={`depth-${subSubheading.depth}`} style={`margin-left: ${(subSubheading.depth - 1)}rem;`}>
                                                                <a href={`#${subSubheading.slug}`}>{subSubheading.text}</a>
                                                            </li>
                                                        ))
                                                    }
                                                </ul>
                                            )}
                                        </li>
                                    ))
                                }
                            </ul>
                        )
                    }
                </li>
            ))
        }
    </ul>
</details>

<style>
    details {
        margin: 0.5rem auto;
    }
    .toc-list {
        list-style-type: none;
        padding-left: 0;
    }
    .depth-1 {
        font-weight: bold;
        margin-top: 0.5rem;
    }
    .depth-2 {
        font-weight: 500;
    }
    .depth-3 {
        font-size: 0.95em;
    }
</style>

