@page "/components/speed-dial"

<PageTitle>Speed Dial — Lumeo</PageTitle>

<PageHeader Title="Speed Dial" Description="A floating action button that expands into a set of related actions — ideal for mobile-first UIs and dashboard quick-access menus." />

<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>Floating action buttons (FABs) that expand into related quick actions</li>
        <li>Mobile-first UIs where a persistent action button is needed</li>
        <li>Dashboard quick-access menus for creating or performing common tasks</li>
        <li>Any interface where multiple related actions should be accessible from a single trigger</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Speed Dial (Bottom Right)" Code="@_basicCode">
        <Stack Gap="3">
            <Alert Title="Fixed Positioning" Description="SpeedDial renders as a fixed-position element. Click the + button in the bottom-right corner of this page to see the demo in action.">
            </Alert>
            <SpeedDial Items="@_items" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Bottom Left Position" Code="@_bottomLeftCode">
        <Stack Gap="3">
            <Lumeo.Text Class="text-sm text-muted-foreground">This SpeedDial appears in the bottom-left corner.</Lumeo.Text>
            <SpeedDial Items="@_shareItems" Position="SpeedDial.SpeedDialPosition.BottomLeft" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Direction: Left" Code="@_directionCode">
        <Stack Gap="3">
            <Lumeo.Text Class="text-sm text-muted-foreground">Actions expand to the left from a top-right anchor.</Lumeo.Text>
            <SpeedDial Items="@_editItems" Position="SpeedDial.SpeedDialPosition.TopRight" Direction="SpeedDial.SpeedDialDirection.Left" />
        </Stack>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">SpeedDial</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">Items</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;SpeedDialItem&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">[]</td>
                            <td class="p-3 text-muted-foreground">The action items to show when the dial is expanded.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Position</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">SpeedDialPosition</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">BottomRight</td>
                            <td class="p-3 text-muted-foreground">Corner position: BottomRight, BottomLeft, TopRight, TopLeft.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Direction</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">SpeedDialDirection</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Up</td>
                            <td class="p-3 text-muted-foreground">Direction the actions expand: Up, Down, Left, Right.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Icon</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">—</td>
                            <td class="p-3 text-muted-foreground">Custom icon for the main trigger button (emoji/text).</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">Variant</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">"default"</td>
                            <td class="p-3 text-muted-foreground">Visual style. Values: "default", "linear", "circular".</td>
                        </tr>
</tbody>
                </table>
            </Stack>
        </Stack>
        <Stack>
            <Heading Level="3" Class="mb-3">SpeedDialItem</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">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Label</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 text-muted-foreground">Tooltip label shown beside the action button.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Icon</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 text-muted-foreground">Emoji or text icon inside the action button.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnClick</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback</td>
                            <td class="p-3 text-muted-foreground">Fired when the action button is clicked.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Disabled</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 text-muted-foreground">Disable this action item.</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/button" class="text-primary hover:underline">Button</a> — Standard button for individual actions</li>
        <li><a href="/components/dropdown-menu" class="text-primary hover:underline">DropdownMenu</a> — Dropdown menu for inline action lists</li>
        <li><a href="/components/tooltip" class="text-primary hover:underline">Tooltip</a> — Tooltip labels shown alongside speed dial action buttons</li>
    </ul>
</div>

@code {
    private List<SpeedDial.SpeedDialItem> _items = new()
    {
        new() { Label = "New Document", Icon = "📄" },
        new() { Label = "Upload File", Icon = "📁" },
        new() { Label = "Take Photo", Icon = "📷" },
        new() { Label = "Add Reminder", Icon = "🔔" },
    };

    private List<SpeedDial.SpeedDialItem> _shareItems = new()
    {
        new() { Label = "Share via Email", Icon = "📧" },
        new() { Label = "Copy Link", Icon = "🔗" },
        new() { Label = "Export PDF", Icon = "📑" },
    };

    private List<SpeedDial.SpeedDialItem> _editItems = new()
    {
        new() { Label = "Edit", Icon = "✏️" },
        new() { Label = "Duplicate", Icon = "📋" },
        new() { Label = "Delete", Icon = "🗑️" },
    };

    private string _basicCode = @"<SpeedDial Items=""@_actions"" />

@code {
    private List<SpeedDial.SpeedDialItem> _actions = new()
    {
        new() { Label = ""New Document"", Icon = ""📄"" },
        new() { Label = ""Upload File"", Icon = ""📁"" },
        new() { Label = ""Add Reminder"", Icon = ""🔔"" },
    };
}";

    private string _bottomLeftCode = @"<SpeedDial Items=""@_actions"" Position=""SpeedDial.SpeedDialPosition.BottomLeft"" />";
    private string _directionCode = @"<SpeedDial Items=""@_actions""
         Position=""SpeedDial.SpeedDialPosition.TopRight""
         Direction=""SpeedDial.SpeedDialDirection.Left"" />";
}
