@page "/components/swipe-actions"

<PageTitle>SwipeActions — Lumeo</PageTitle>

<PageHeader Title="SwipeActions" Description="An iOS Mail-style swipe row that reveals contextual action buttons on the leading or trailing edge when the user swipes horizontally." />

<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>List rows that have destructive actions (delete, archive) best kept out of the default view</li>
        <li>Inbox or notification lists where swipe-to-dismiss or swipe-to-archive is an expected pattern</li>
        <li>Mobile task managers where quick actions like complete or snooze improve flow</li>
        <li>Any context where a row-level action menu would feel heavy on a touch device</li>
        <li>Replacing long-press context menus with a more discoverable horizontal swipe</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Trailing Actions (swipe left)" Code="@_trailingCode">
        <Stack Gap="2">
            @foreach (var item in _items.ToList())
            {
                var captured = item;
                <SwipeActions>
                    <TrailingActions>
                        <Button Variant="Button.ButtonVariant.Destructive"
                                Class="h-full rounded-none px-5"
                                OnClick="@(() => _items.Remove(captured))">
                            Delete
                        </Button>
                        <Button Variant="Button.ButtonVariant.Secondary"
                                Class="h-full rounded-none px-5">
                            Archive
                        </Button>
                    </TrailingActions>
                    <ChildContent>
                        <div class="flex items-center gap-3 border border-border/40 rounded-lg px-4 py-3 bg-background">
                            <div class="flex-1">
                                <Lumeo.Text Size="sm">@captured</Lumeo.Text>
                            </div>
                            <Lumeo.Text Size="xs" Color="muted">Swipe left</Lumeo.Text>
                        </div>
                    </ChildContent>
                </SwipeActions>
            }
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Leading and Trailing Actions" Code="@_bothCode">
        <SwipeActions>
            <LeadingActions>
                <Button Variant="Button.ButtonVariant.Secondary"
                        Class="h-full rounded-none px-5">
                    Pin
                </Button>
            </LeadingActions>
            <TrailingActions>
                <Button Variant="Button.ButtonVariant.Destructive"
                        Class="h-full rounded-none px-5">
                    Delete
                </Button>
                <Button Variant="Button.ButtonVariant.Secondary"
                        Class="h-full rounded-none px-5">
                    Snooze
                </Button>
            </TrailingActions>
            <ChildContent>
                <div class="flex items-center gap-3 border border-border/40 rounded-lg px-4 py-3 bg-background">
                    <div class="flex-1">
                        <Lumeo.Text Size="sm">Meeting with design team</Lumeo.Text>
                        <Lumeo.Text Size="xs" Color="muted">Tomorrow at 10:00 AM</Lumeo.Text>
                    </div>
                    <Lumeo.Text Size="xs" Color="muted">Swipe either way</Lumeo.Text>
                </div>
            </ChildContent>
        </SwipeActions>
    </ComponentDemo>

    <ComponentDemo Title="Custom Activation Threshold" Code="@_thresholdCode">
        <SwipeActions ActivationThresholdPx="40">
            <TrailingActions>
                <Button Variant="Button.ButtonVariant.Destructive"
                        Class="h-full rounded-none px-6">
                    Remove
                </Button>
            </TrailingActions>
            <ChildContent>
                <div class="flex items-center gap-3 border border-border/40 rounded-lg px-4 py-3 bg-background">
                    <div class="flex-1">
                        <Lumeo.Text Size="sm">Low-threshold row</Lumeo.Text>
                        <Lumeo.Text Size="xs" Color="muted">Activates after 40 px</Lumeo.Text>
                    </div>
                </div>
            </ChildContent>
        </SwipeActions>
    </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">SwipeActions</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 foreground row content that slides to reveal actions.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">LeadingActions</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">null</td>
                            <td class="p-3 text-muted-foreground">Action buttons revealed on the left edge when the user swipes right. Omit to disable leading swipe.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">TrailingActions</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">null</td>
                            <td class="p-3 text-muted-foreground">Action buttons revealed on the right edge when the user swipes left. Omit to disable trailing swipe.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ActivationThresholdPx</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 horizontal travel required for the panel to lock open on release. Below this the row springs back to closed.</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 root container.</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/pull-to-refresh" class="text-primary hover:underline">PullToRefresh</a> — Pull-down gesture to trigger a data reload</li>
        <li><a href="/components/touch-ripple" class="text-primary hover:underline">TouchRipple</a> — Visual tap feedback for interactive elements</li>
        <li><a href="/components/context-menu" class="text-primary hover:underline">ContextMenu</a> — Right-click or long-press menu for row-level actions</li>
    </ul>
</div>

@code {
    private List<string> _items = new() { "Project proposal draft", "Q2 budget review", "Team standup notes" };

    private string _trailingCode = @"<SwipeActions>
    <TrailingActions>
        <Button Variant=""Button.ButtonVariant.Destructive"" Class=""h-full rounded-none px-5"">Delete</Button>
        <Button Variant=""Button.ButtonVariant.Secondary""    Class=""h-full rounded-none px-5"">Archive</Button>
    </TrailingActions>
    <ChildContent>
        <div class=""flex items-center gap-3 border border-border/40 rounded-lg px-4 py-3 bg-background"">
            <Text Size=""sm"">Project proposal draft</Text>
        </div>
    </ChildContent>
</SwipeActions>";

    private string _bothCode = @"<SwipeActions>
    <LeadingActions>
        <Button Variant=""Button.ButtonVariant.Secondary"" Class=""h-full rounded-none px-5"">Pin</Button>
    </LeadingActions>
    <TrailingActions>
        <Button Variant=""Button.ButtonVariant.Destructive"" Class=""h-full rounded-none px-5"">Delete</Button>
        <Button Variant=""Button.ButtonVariant.Secondary""    Class=""h-full rounded-none px-5"">Snooze</Button>
    </TrailingActions>
    <ChildContent>
        <div class=""flex items-center gap-3 border border-border/40 rounded-lg px-4 py-3 bg-background"">
            <Text Size=""sm"">Meeting with design team</Text>
        </div>
    </ChildContent>
</SwipeActions>";

    private string _thresholdCode = @"<SwipeActions ActivationThresholdPx=""40"">
    <TrailingActions>
        <Button Variant=""Button.ButtonVariant.Destructive"" Class=""h-full rounded-none px-6"">Remove</Button>
    </TrailingActions>
    <ChildContent>
        <div class=""flex items-center gap-3 border border-border/40 rounded-lg px-4 py-3 bg-background"">
            <Text Size=""sm"">Activates after only 40 px of swipe</Text>
        </div>
    </ChildContent>
</SwipeActions>";
}
