@page "/components/scrollspy"

<PageTitle>Scrollspy — Lumeo</PageTitle>

<PageHeader Title="Scrollspy" Description="Monitors scroll position within a container and highlights the corresponding navigation link." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Documentation pages with a table of contents that highlights the current section</li>
        <li>Long-form content with sidebar navigation for section tracking</li>
        <li>Single-page applications where scroll position drives navigation state</li>
        <li>Landing pages with smooth-scrolling section links</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Vertical Scrollspy" Code="@_verticalCode">
        <Scrollspy Class="flex gap-4 w-full max-w-2xl" @bind-ActiveId="_activeVertical">
            <nav class="flex flex-col gap-1 w-40 shrink-0 sticky top-0 self-start">
                @for (int i = 1; i <= 6; i++)
                {
                    var id = $"v-section-{i}";
                    var label = $"Section {i}";
                    <ScrollspyLink Target="@id"
                                   Class="px-3 py-1.5 rounded-md text-sm font-medium text-muted-foreground transition-colors hover:text-foreground data-[active=true]:bg-primary data-[active=true]:text-primary-foreground">
                        @label
                    </ScrollspyLink>
                }
            </nav>
            <Stack Gap="0" Class="flex-1 overflow-y-auto h-[400px] rounded-md border border-border/40">
                @for (int i = 1; i <= 6; i++)
                {
                    var id = $"v-section-{i}";
                    var title = $"Section {i}";
                    <ScrollspySection Id="@id" Class="p-6 min-h-[300px]">
                        <Heading Level="3" Size="lg" Weight="semibold" Class="mb-2">@title</Heading>
                        <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed">
                            This is the content for @title. Scroll through the container to see the
                            navigation links update automatically. Each section is tracked by the
                            Scrollspy component, which detects which section is currently in view
                            and highlights the corresponding link in the sidebar navigation.
                        </Lumeo.Text>
                        <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed mt-4">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </Lumeo.Text>
                    </ScrollspySection>
                }
            </Stack>
        </Scrollspy>
    </ComponentDemo>

    <ComponentDemo Title="Horizontal Nav" Code="@_horizontalCode">
        <Scrollspy Class="flex flex-col w-full max-w-2xl" @bind-ActiveId="_activeHorizontal">
            <nav class="flex gap-1 mb-4 border-b border-border/40 pb-2">
                @for (int i = 1; i <= 6; i++)
                {
                    var id = $"h-section-{i}";
                    var label = $"Section {i}";
                    <ScrollspyLink Target="@id"
                                   Class="px-3 py-1.5 rounded-md text-sm font-medium text-muted-foreground transition-colors hover:text-foreground data-[active=true]:bg-primary data-[active=true]:text-primary-foreground">
                        @label
                    </ScrollspyLink>
                }
            </nav>
            <Stack Gap="0" Class="overflow-y-auto h-[400px] rounded-md border border-border/40">
                @for (int i = 1; i <= 6; i++)
                {
                    var id = $"h-section-{i}";
                    var title = $"Section {i}";
                    <ScrollspySection Id="@id" Class="p-6 min-h-[300px]">
                        <Heading Level="3" Size="lg" Weight="semibold" Class="mb-2">@title</Heading>
                        <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed">
                            This is the content for @title. Click any navigation link above to
                            smooth-scroll to that section, or scroll manually to see the active
                            link update in real time.
                        </Lumeo.Text>
                        <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed mt-4">
                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                            sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </Lumeo.Text>
                    </ScrollspySection>
                }
            </Stack>
        </Scrollspy>
    </ComponentDemo>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="scrollspy" Level="3" Class="mt-8 scroll-mt-20">Scrollspy</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The scrollspy container content (links and sections).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Offset</TableCell><TableCell Class="font-mono text-xs">int</TableCell><TableCell Class="font-mono text-xs">0</TableCell><TableCell>Pixel offset from the top when determining the active section.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Smooth</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">true</TableCell><TableCell>Enables smooth scrolling when navigating to sections.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ActiveId</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The currently active section ID. Use with @@bind-ActiveId.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ActiveIdChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;string&gt;</TableCell><TableCell Class="font-mono text-xs">-</TableCell><TableCell>Callback invoked when the active section changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="scrollspysection" Level="3" Class="mt-8 scroll-mt-20">ScrollspySection</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Id</TableCell><TableCell Class="font-mono text-xs">string</TableCell><TableCell Class="font-mono text-xs">""</TableCell><TableCell>Unique section identifier. Required.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The section content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="scrollspylink" Level="3" Class="mt-8 scroll-mt-20">ScrollspyLink</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Target</TableCell><TableCell Class="font-mono text-xs">string</TableCell><TableCell Class="font-mono text-xs">""</TableCell><TableCell>ID of the section to scroll to. Required.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The link label content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/scroll-area" class="text-primary hover:underline">ScrollArea</a> — Custom scrollable container for content areas</li>
        <li><a href="/components/navigation-menu" class="text-primary hover:underline">NavigationMenu</a> — Navigation menu for site-wide or section navigation</li>
        <li><a href="/components/affix" class="text-primary hover:underline">Affix</a> — Pin elements to a fixed position during scroll</li>
    </ul>
</div>

@code {
    private string? _activeVertical;
    private string? _activeHorizontal;

    private string _verticalCode = @"<Scrollspy Class=""flex gap-4"" @bind-ActiveId=""_active"">
    <nav class=""flex flex-col gap-1 w-40 shrink-0"">
        <ScrollspyLink Target=""section-1""
                       Class=""px-3 py-1.5 rounded-md text-sm font-medium text-muted-foreground
                              data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"">
            Section 1
        </ScrollspyLink>
        <ScrollspyLink Target=""section-2"" Class=""..."">Section 2</ScrollspyLink>
        <ScrollspyLink Target=""section-3"" Class=""..."">Section 3</ScrollspyLink>
    </nav>
    <div class=""flex-1 overflow-y-auto h-[400px] rounded-md border border-border/40"">
        <ScrollspySection Id=""section-1"" Class=""p-6 min-h-[300px]"">
            <h3>Section 1</h3>
            <p>Content for section 1...</p>
        </ScrollspySection>
        <ScrollspySection Id=""section-2"" Class=""p-6 min-h-[300px]"">
            <h3>Section 2</h3>
            <p>Content for section 2...</p>
        </ScrollspySection>
        <ScrollspySection Id=""section-3"" Class=""p-6 min-h-[300px]"">
            <h3>Section 3</h3>
            <p>Content for section 3...</p>
        </ScrollspySection>
    </div>
</Scrollspy>

@code {
    private string? _active;
}";

    private string _horizontalCode = @"<Scrollspy Class=""flex flex-col"" @bind-ActiveId=""_active"">
    <nav class=""flex gap-1 mb-4 border-b pb-2"">
        <ScrollspyLink Target=""section-1""
                       Class=""px-3 py-1.5 rounded-md text-sm font-medium text-muted-foreground
                              data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"">
            Section 1
        </ScrollspyLink>
        <ScrollspyLink Target=""section-2"" Class=""..."">Section 2</ScrollspyLink>
    </nav>
    <div class=""overflow-y-auto h-[400px] rounded-md border border-border/40"">
        <ScrollspySection Id=""section-1"" Class=""p-6 min-h-[300px]"">
            <h3>Section 1</h3>
            <p>Content...</p>
        </ScrollspySection>
        <ScrollspySection Id=""section-2"" Class=""p-6 min-h-[300px]"">
            <h3>Section 2</h3>
            <p>Content...</p>
        </ScrollspySection>
    </div>
</Scrollspy>

@code {
    private string? _active;
}";
}
