import { useContent, useLocation } from '@builder.io/qwik-city'
import { component$, useStyles$ } from '@builder.io/qwik'
import styles from './on-this-page.css?inline'

export default component$(() => {
    useStyles$(styles)

    const { headings } = useContent()
    const contentHeadings =
        headings?.filter((h) => h.level === 2 || h.level === 3) || []

    const { pathname } = useLocation()
    const editUrl = `#update-your-edit-url-for-${pathname}`

    return (
        <aside class="on-this-page">
            {contentHeadings.length > 0 ? (
                <>
                    <h6>On This Page</h6>
                    <ul>
                        {contentHeadings.map((h) => (
                            <li>
                                <a
                                    href={`#${h.id}`}
                                    class={{
                                        block: true,
                                        indent: h.level > 2,
                                    }}
                                >
                                    {h.text}
                                </a>
                            </li>
                        ))}
                    </ul>
                </>
            ) : null}

            <h6>More</h6>
            <ul>
                <li>
                    <a href={editUrl} target="_blank">
                        Edit this page
                    </a>
                </li>
                <li>
                    <a href="https://qwik.builder.io/chat" target="_blank">
                        Join our community
                    </a>
                </li>
                <li>
                    <a href="https://github.com/BuilderIO/qwik" target="_blank">
                        GitHub
                    </a>
                </li>
                <li>
                    <a href="https://twitter.com/QwikDev" target="_blank">
                        @QwikDev
                    </a>
                </li>
            </ul>
        </aside>
    )
})