@page "/components/split-button"

<PageTitle>SplitButton — Lumeo</PageTitle>

<PageHeader Title="SplitButton" Description="A button split into a main action half and a chevron half that opens a dropdown menu of secondary actions." />

<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>There is one dominant primary action and several less common alternatives (e.g. Save vs. Save and Publish).</li>
        <li>Reduce button count in toolbars while still exposing all relevant actions.</li>
        <li>Replace a plain button + separate dropdown when both should share the same visual weight.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic" Code="@_basicCode">
        <SplitButton Text="Save" OnClick="HandleSave">
            <MenuContent>
                <DropdownMenuItem OnClick="HandleSaveAndPublish">Save and Publish</DropdownMenuItem>
                <DropdownMenuItem OnClick="HandleSaveAsDraft">Save as Draft</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Discard changes</DropdownMenuItem>
            </MenuContent>
        </SplitButton>
        @if (_lastAction is not null)
        {
            <Lumeo.Text Size="sm" Color="muted" Class="mt-2">Last action: @_lastAction</Lumeo.Text>
        }
    </ComponentDemo>

    <ComponentDemo Title="Variants" Code="@_variantsCode">
        <Flex Gap="2" Wrap="true">
            <SplitButton Text="Default">
                <MenuContent>
                    <DropdownMenuItem>Option A</DropdownMenuItem>
                    <DropdownMenuItem>Option B</DropdownMenuItem>
                </MenuContent>
            </SplitButton>
            <SplitButton Text="Secondary" Variant="Button.ButtonVariant.Secondary">
                <MenuContent>
                    <DropdownMenuItem>Option A</DropdownMenuItem>
                    <DropdownMenuItem>Option B</DropdownMenuItem>
                </MenuContent>
            </SplitButton>
            <SplitButton Text="Outline" Variant="Button.ButtonVariant.Outline">
                <MenuContent>
                    <DropdownMenuItem>Option A</DropdownMenuItem>
                    <DropdownMenuItem>Option B</DropdownMenuItem>
                </MenuContent>
            </SplitButton>
            <SplitButton Text="Destructive" Variant="Button.ButtonVariant.Destructive">
                <MenuContent>
                    <DropdownMenuItem>Remove</DropdownMenuItem>
                    <DropdownMenuItem>Purge</DropdownMenuItem>
                </MenuContent>
            </SplitButton>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizesCode">
        <Flex Gap="2" Wrap="true" Align="center">
            <SplitButton Text="Small" Size="Button.ButtonSize.Sm">
                <MenuContent>
                    <DropdownMenuItem>Option A</DropdownMenuItem>
                </MenuContent>
            </SplitButton>
            <SplitButton Text="Default">
                <MenuContent>
                    <DropdownMenuItem>Option A</DropdownMenuItem>
                </MenuContent>
            </SplitButton>
            <SplitButton Text="Large" Size="Button.ButtonSize.Lg">
                <MenuContent>
                    <DropdownMenuItem>Option A</DropdownMenuItem>
                </MenuContent>
            </SplitButton>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <SplitButton Text="Disabled" Disabled="true">
            <MenuContent>
                <DropdownMenuItem>Option A</DropdownMenuItem>
            </MenuContent>
        </SplitButton>
    </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">SplitButton</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">Text</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">Primary button label text. Ignored when ChildContent is provided.</td>
                        </tr>
                        <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">null</td>
                            <td class="p-3 text-muted-foreground">Custom primary button label content. Takes precedence over Text.</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&lt;MouseEventArgs&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when the primary (left) half of the button is clicked.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MenuContent</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">The dropdown menu items rendered when the chevron half is clicked. Place DropdownMenuItem elements here.</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">Button.ButtonVariant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Visual style applied to both halves. Values: Default, Secondary, Destructive, Outline, Ghost, Link.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Size</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Button.ButtonSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Size applied to both halves. Values: Sm, Default, Lg.</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 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Disables both halves of the button.</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 wrapper element.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">AdditionalAttributes</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Dictionary&lt;string, object&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Additional HTML attributes forwarded to the wrapper 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/button" class="text-primary hover:underline">Button</a> — A standard single-action trigger.</li>
        <li><a href="/components/dropdown-button" class="text-primary hover:underline">DropdownButton</a> — A button that opens a dropdown menu without a separate primary action.</li>
        <li><a href="/components/button-group" class="text-primary hover:underline">ButtonGroup</a> — Groups multiple related buttons into a segmented bar.</li>
    </ul>
</div>

@code {
    private string? _lastAction;

    private void HandleSave() => _lastAction = "Save";
    private void HandleSaveAndPublish() => _lastAction = "Save and Publish";
    private void HandleSaveAsDraft() => _lastAction = "Save as Draft";

    private string _basicCode = @"<SplitButton Text=""Save"" OnClick=""HandleSave"">
    <MenuContent>
        <DropdownMenuItem OnClick=""HandleSaveAndPublish"">Save and Publish</DropdownMenuItem>
        <DropdownMenuItem OnClick=""HandleSaveAsDraft"">Save as Draft</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Discard changes</DropdownMenuItem>
    </MenuContent>
</SplitButton>

@code {
    private void HandleSave() { /* primary action */ }
    private void HandleSaveAndPublish() { /* secondary */ }
    private void HandleSaveAsDraft() { /* secondary */ }
}";

    private string _variantsCode = @"<SplitButton Text=""Default"">
    <MenuContent>
        <DropdownMenuItem>Option A</DropdownMenuItem>
        <DropdownMenuItem>Option B</DropdownMenuItem>
    </MenuContent>
</SplitButton>
<SplitButton Text=""Secondary"" Variant=""Button.ButtonVariant.Secondary"">
    <MenuContent>
        <DropdownMenuItem>Option A</DropdownMenuItem>
        <DropdownMenuItem>Option B</DropdownMenuItem>
    </MenuContent>
</SplitButton>
<SplitButton Text=""Outline"" Variant=""Button.ButtonVariant.Outline"">
    <MenuContent>
        <DropdownMenuItem>Option A</DropdownMenuItem>
        <DropdownMenuItem>Option B</DropdownMenuItem>
    </MenuContent>
</SplitButton>";

    private string _sizesCode = @"<SplitButton Text=""Small"" Size=""Button.ButtonSize.Sm"">
    <MenuContent><DropdownMenuItem>Option A</DropdownMenuItem></MenuContent>
</SplitButton>
<SplitButton Text=""Default"">
    <MenuContent><DropdownMenuItem>Option A</DropdownMenuItem></MenuContent>
</SplitButton>
<SplitButton Text=""Large"" Size=""Button.ButtonSize.Lg"">
    <MenuContent><DropdownMenuItem>Option A</DropdownMenuItem></MenuContent>
</SplitButton>";

    private string _disabledCode = @"<SplitButton Text=""Disabled"" Disabled=""true"">
    <MenuContent>
        <DropdownMenuItem>Option A</DropdownMenuItem>
    </MenuContent>
</SplitButton>";
}
