@page "/components/pull-to-refresh"

<PageTitle>PullToRefresh — Lumeo</PageTitle>

<PageHeader Title="PullToRefresh" Description="An iOS/Android-style pull-down-to-refresh wrapper that fires a callback when the user drags past a configurable threshold." />

<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>Mobile feeds, timelines, or lists where users expect to pull down to load fresh data</li>
        <li>Any scrollable panel that benefits from a gesture-driven reload instead of a visible refresh button</li>
        <li>News, social, or activity streams presented in a fixed-height container on touch devices</li>
        <li>Replacing manual "Reload" buttons with an intuitive gesture on hybrid mobile/desktop apps</li>
        <li>Content areas where polling is undesirable and user-triggered refresh is preferred</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Pull to Refresh" Code="@_basicCode">
        <div class="h-64 rounded-lg border border-border/40 overflow-hidden">
            <PullToRefresh OnRefresh="HandleRefresh">
                <Stack Gap="3" Class="p-4">
                    <Lumeo.Text Size="sm" Color="muted">Pull down to refresh · Count: @_refreshCount</Lumeo.Text>
                    @for (int i = 1; i <= 5; i++)
                    {
                        var label = $"Item {i}";
                        <div class="rounded-md border border-border/40 bg-muted/20 px-4 py-3 text-sm text-foreground">@label</div>
                    }
                </Stack>
            </PullToRefresh>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Custom Threshold and Max Pull" Code="@_thresholdCode">
        <div class="h-56 rounded-lg border border-border/40 overflow-hidden">
            <PullToRefresh OnRefresh="HandleRefresh2" ThresholdPx="50" MaxPullPx="80">
                <Stack Gap="3" Class="p-4">
                    <Lumeo.Text Size="sm" Color="muted">Threshold 50 px · Count: @_refreshCount2</Lumeo.Text>
                    @for (int i = 1; i <= 4; i++)
                    {
                        var label = $"Row {i}";
                        <div class="rounded-md border border-border/40 bg-muted/20 px-4 py-3 text-sm text-foreground">@label</div>
                    }
                </Stack>
            </PullToRefresh>
        </div>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack Gap="8" Class="mt-8">
        <Stack Gap="3">
            <Heading Level="3">PullToRefresh</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ChildContent</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">The scrollable content rendered inside the pull container.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnRefresh</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Async callback invoked when the user releases past the threshold. The spinner remains visible until the callback completes.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ThresholdPx</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">double</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">80</td>
                            <td class="p-3 text-muted-foreground">Minimum pull distance (after rubber-band damping) required to trigger a refresh.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MaxPullPx</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">double</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">120</td>
                            <td class="p-3 text-muted-foreground">Maximum visual offset the content travels before the rubber-band clamps it.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Class</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Additional CSS classes applied to the scroll container root element.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

<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/swipe-actions" class="text-primary hover:underline">SwipeActions</a> — Reveal contextual actions by swiping a list row horizontally</li>
        <li><a href="/components/touch-ripple" class="text-primary hover:underline">TouchRipple</a> — Material-style touch feedback for tappable elements</li>
        <li><a href="/components/scroll-area" class="text-primary hover:underline">ScrollArea</a> — Custom-styled scroll container for overflow content</li>
    </ul>
</div>

@code {
    private int _refreshCount;
    private int _refreshCount2;

    private async Task HandleRefresh()
    {
        await Task.Delay(1000);
        _refreshCount++;
    }

    private async Task HandleRefresh2()
    {
        await Task.Delay(800);
        _refreshCount2++;
    }

    private string _basicCode = @"<div class=""h-64 rounded-lg border border-border/40 overflow-hidden"">
    <PullToRefresh OnRefresh=""HandleRefresh"">
        <Stack Gap=""3"" Class=""p-4"">
            <Text Size=""sm"" Color=""muted"">Pull down to refresh · Count: @_refreshCount</Text>
            <div class=""rounded-md border border-border/40 bg-muted/20 px-4 py-3 text-sm"">Item 1</div>
            <div class=""rounded-md border border-border/40 bg-muted/20 px-4 py-3 text-sm"">Item 2</div>
        </Stack>
    </PullToRefresh>
</div>

@code {
    private int _refreshCount;

    private async Task HandleRefresh()
    {
        await Task.Delay(1000);
        _refreshCount++;
    }
}";

    private string _thresholdCode = @"<PullToRefresh OnRefresh=""HandleRefresh"" ThresholdPx=""50"" MaxPullPx=""80"">
    <Stack Gap=""3"" Class=""p-4"">
        <Text Size=""sm"" Color=""muted"">Triggers after only 50 px of pull</Text>
        <div class=""rounded-md border border-border/40 bg-muted/20 px-4 py-3 text-sm"">Row 1</div>
        <div class=""rounded-md border border-border/40 bg-muted/20 px-4 py-3 text-sm"">Row 2</div>
    </Stack>
</PullToRefresh>";
}
