<script lang="ts">
	export let html: string;

	const headings: {
		level: number;
    id: string;
		text: string;
	}[] = [];
	html.match(/<h(\d) id="([^"]+)">([^<]+)<\/h\d>/g)?.forEach((match) => {
    console.log(match);
    const [, level, id, text] = match.match(/<h(\d) id="([^"]+)">([^<]+)<\/h\d>/)!;
    headings.push({ level: +level, id, text });
  });
	let output = '';
	let lastLevel = 1;
	headings.forEach(({ level, id, text }) => {
    console.log(level, id, text);
		if (level > lastLevel) {
			output += '<ul>';
		} else if (level < lastLevel) {
			output += '</li></ul>'.repeat(lastLevel - level);
		} else {
			if (output !== '') {
			}
		}
		output += `<li><a href="#${id}">${text}</a>`;
		lastLevel = level;
	});
	output += '</li>'.repeat(lastLevel);
</script>

<div class="overview">
	<ul>
    {@html output}
  </ul>
</div>

<style lang="scss">
	.overview {
		margin: 0;
		padding: 0;
    :global(ul) {
			list-style-type: none;
      margin-left: 0.5em;
      padding-left: 0.25em;
      border-left: 1px solid var(--line-primary);
      box-sizing: border-box;
		}
    ul {
      border-left: none;
    }
		:global(li) {
			padding: 0.5em 0.5em 0;
      box-sizing: border-box;
    }
    :global(a) {
      text-decoration: none;
      color: var(--text-primary);
      padding: 0.15em 0.4em;
      border-radius: 0.25em;
      text-wrap: nowrap;
      box-sizing: border-box;
      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }
	}
</style>
