---
import { NAVBAR_HEIGHT } from "@constants/constants";
import { i18n } from "@i18n/translation";
import I18nKey from "@i18n/i18nKey";
import WidgetLayout from "./widgetLayout.astro";


interface Props {
    id?: string;
    class?: string;
    style?: string;
    depth?: number;
    side?: string;
}

const { id: propId, class: className, style, depth = 3, side = "default" } = Astro.props;
const id = propId || `toc-wrapper-${side}`;
---

<WidgetLayout name={i18n(I18nKey.tableOfContents)} id={id} class:list={[className, "toc-wrapper", "toc-hide"]} style={style}>
    <div class="toc-scroll-container">
        <table-of-contents class="group" data-depth={depth} data-navbar-height={NAVBAR_HEIGHT}>
            <div class="toc-inner-content relative"></div>
        </table-of-contents>
    </div>
</WidgetLayout>

<script>
import "./toc";
</script>

<style>
    .toc-scroll-container {
        max-height: calc(100vh - 20rem);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    .toc-scroll-container::-webkit-scrollbar {
        width: 4px;
    }
    .toc-scroll-container::-webkit-scrollbar-track {
        background: transparent;
    }
    .toc-scroll-container::-webkit-scrollbar-thumb {
        background: var(--toc-btn-hover);
        border-radius: 10px;
    }
    table-of-contents#toc {
        position: relative;
        display: block;
    }

    /* 高亮当前项文字 */
    :global(.toc-inner-content a.visible .text-50),
    :global(.toc-inner-content a.visible .text-30) {
        color: var(--primary);
        font-weight: 500;
    }

    /* 基础过渡样式 */
    :global(widget-layout.toc-wrapper) {
        transition:
            max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
            margin-bottom 300ms cubic-bezier(0.4, 0, 0.2, 1),
            padding 300ms cubic-bezier(0.4, 0, 0.2, 1),
            visibility 300ms;
        max-height: 1200px; /* 足够容纳目录的高度，避免 100vh 可能带来的过长过渡延迟 */
        overflow: hidden;
    }
    /* 隐藏状态 */
    :global(widget-layout.toc-wrapper.toc-hide) {
        max-height: 0;
        opacity: 0;
        margin-bottom: -1rem; /* 抵消父级 flex 的 gap-4 */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        visibility: hidden;
        pointer-events: none;
    }
</style>