@page "/components/toggle"

<PageTitle>Toggle — Lumeo</PageTitle>

<PageHeader Title="Toggle" Description="A two-state button that can be either on or off." />

<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>Activate or deactivate a formatting option such as Bold, Italic, or Underline in a toolbar.</li>
        <li>Represent a binary on/off state that is clearly visible as a pressed/unpressed button.</li>
        <li>Provide icon-only controls in compact toolbars where a Switch would be too wide.</li>
        <li>Combine into a ToggleGroup for mutually exclusive selections like text alignment.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Toggle @bind-Pressed="_bold">
            <DynamicIcon Name="Bold" Class="h-4 w-4" />
        </Toggle>
    </ComponentDemo>

    <ComponentDemo Title="Variants" Code="@_variantCode">
        <Flex Gap="2" Wrap="true">
            <Toggle @bind-Pressed="_pressed1">
                <DynamicIcon Name="Bold" Class="h-4 w-4" />
            </Toggle>
            <Toggle Variant="Toggle.ToggleVariant.Outline" @bind-Pressed="_pressed2">
                <DynamicIcon Name="Italic" Class="h-4 w-4" />
            </Toggle>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizeCode">
        <Flex Gap="2" Wrap="true" Align="center">
            <Toggle Size="Toggle.ToggleSize.Sm" @bind-Pressed="_sm">
                <DynamicIcon Name="Bold" Class="h-3 w-3" />
            </Toggle>
            <Toggle @bind-Pressed="_md">
                <DynamicIcon Name="Bold" Class="h-4 w-4" />
            </Toggle>
            <Toggle Size="Toggle.ToggleSize.Lg" @bind-Pressed="_lg">
                <DynamicIcon Name="Bold" Class="h-5 w-5" />
            </Toggle>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="With Text" Code="@_textCode">
        <Flex Gap="2" Wrap="true">
            <Toggle @bind-Pressed="_toggleText1">
                <DynamicIcon Name="Bold" Class="h-4 w-4" />
                Bold
            </Toggle>
            <Toggle @bind-Pressed="_toggleText2">
                <DynamicIcon Name="Italic" Class="h-4 w-4" />
                Italic
            </Toggle>
            <Toggle @bind-Pressed="_toggleText3">
                <DynamicIcon Name="Underline" Class="h-4 w-4" />
                Underline
            </Toggle>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <Flex Gap="2" Wrap="true">
            <Toggle Disabled="true">
                <DynamicIcon Name="Bold" Class="h-4 w-4" />
            </Toggle>
            <Toggle Disabled="true" Pressed="true">
                <DynamicIcon Name="Italic" Class="h-4 w-4" />
            </Toggle>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Variant — interactive preview" Code="@_interactiveVariantCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch between variants to see the visual difference live.</Lumeo.Text>
            <Segmented @bind-Value="_previewVariant">
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Outline">Outline</SegmentedItem>
            </Segmented>
            <Flex Gap="2">
                <Toggle Variant="_togglePreviewVariant" @bind-Pressed="_previewPressed">
                    <DynamicIcon Name="Bold" Class="h-4 w-4" />
                    Bold
                </Toggle>
                <Lumeo.Text Size="sm" Color="muted" Class="self-center">Pressed: @_previewPressed</Lumeo.Text>
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Size — interactive preview" Code="@_interactiveSizeCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a size to see the toggle scale live.</Lumeo.Text>
            <Segmented @bind-Value="_previewSize">
                <SegmentedItem Value="Sm">Sm</SegmentedItem>
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Lg">Lg</SegmentedItem>
            </Segmented>
            <Toggle Size="_togglePreviewSize">
                <DynamicIcon Name="Bold" Class="h-4 w-4" />
                @_previewSize
            </Toggle>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Icon + Text slots — interactive preview" Description="Toggle the icon and text slots independently to compose your toggle content." Code="@_interactiveSlotCode">
        <Stack Gap="4">
            <Flex Align="center" Gap="6" Wrap="true">
                <Flex Align="center" Gap="2">
                    <Switch @bind-Checked="_toggleShowIcon" />
                    <Lumeo.Text Size="sm" Color="muted">Show icon</Lumeo.Text>
                </Flex>
                <Flex Align="center" Gap="2">
                    <Switch @bind-Checked="_toggleShowText" />
                    <Lumeo.Text Size="sm" Color="muted">Show text</Lumeo.Text>
                </Flex>
            </Flex>
            <Toggle @bind-Pressed="_slotPressed">
                @if (_toggleShowIcon)
                {
                    <DynamicIcon Name="Bold" Class="h-4 w-4" />
                }
                @if (_toggleShowText)
                {
                    <span>Bold</span>
                }
                @if (!_toggleShowIcon && !_toggleShowText)
                {
                    <Lumeo.Text Size="xs" Color="muted">(empty)</Lumeo.Text>
                }
            </Toggle>
            <Lumeo.Text Size="sm" Color="muted">Pressed: @_slotPressed</Lumeo.Text>
        </Stack>
    </ComponentDemo>
</Stack>

<div class="mt-12">
    <Heading Id="keyboard-interactions" Level="2" Class="scroll-mt-20">Keyboard Interactions</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Key</TableHead>
                    <TableHead>Action</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell><Kbd>Space</Kbd></TableCell><TableCell>Toggles the pressed state.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Enter</Kbd></TableCell><TableCell>Activates the toggle.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Tab</Kbd></TableCell><TableCell>Moves focus to the next focusable element.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8">
        <Stack Gap="3">
            <Heading Level="3">Toggle</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">Pressed</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">Whether the toggle is in a pressed/active state. Use with @@bind-Pressed for two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">PressedChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;bool&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 pressed state changes.</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">ToggleVariant</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, Outline.</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">ToggleSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Size of the toggle button. Values: Default, Sm, 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">When true, prevents interaction and dims the toggle.</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">Content rendered inside the toggle button (icon, text, or both).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">AriaLabel</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">Accessible label announced by screen readers for icon-only toggles.</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/toggle-group" class="text-primary hover:underline">ToggleGroup</a> — A set of toggles for selecting one or more formatting options.</li>
        <li><a href="/components/button" class="text-primary hover:underline">Button</a> — Use when the action is one-shot rather than a persistent on/off state.</li>
        <li><a href="/components/switch" class="text-primary hover:underline">Switch</a> — A toggle for settings panels where the on/off metaphor is clearer.</li>
        <li><a href="/components/checkbox" class="text-primary hover:underline">Checkbox</a> — Use for multi-select form fields or items inside a list.</li>
    </ul>
</div>

@code {
    private bool _bold;
    private bool _pressed1;
    private bool _pressed2;
    private bool _sm;
    private bool _md;
    private bool _lg;
    private bool _toggleText1;
    private bool _toggleText2;
    private bool _toggleText3;

    private string _defaultCode = @"<Toggle @bind-Pressed=""_bold"">
    <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
</Toggle>

@code {
    private bool _bold;
}";

    private string _variantCode = @"<Toggle @bind-Pressed=""_pressed1"">
    <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
</Toggle>
<Toggle Variant=""Toggle.ToggleVariant.Outline"" @bind-Pressed=""_pressed2"">
    <Blazicon Svg=""Lucide.Italic"" class=""h-4 w-4"" />
</Toggle>";

    private string _sizeCode = @"<Toggle Size=""Toggle.ToggleSize.Sm"" @bind-Pressed=""_sm"">
    <Blazicon Svg=""Lucide.Bold"" class=""h-3 w-3"" />
</Toggle>
<Toggle @bind-Pressed=""_md"">
    <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
</Toggle>
<Toggle Size=""Toggle.ToggleSize.Lg"" @bind-Pressed=""_lg"">
    <Blazicon Svg=""Lucide.Bold"" class=""h-5 w-5"" />
</Toggle>";

    private string _textCode = @"<Toggle @bind-Pressed=""_pressed"">
    <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
    Bold
</Toggle>";

    private string _disabledCode = @"<Toggle Disabled=""true"">
    <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
</Toggle>
<Toggle Disabled=""true"" Pressed=""true"">
    <Blazicon Svg=""Lucide.Italic"" class=""h-4 w-4"" />
</Toggle>";

    private string _previewVariant = "Default";
    private string _previewSize = "Default";
    private bool _previewPressed;
    private bool _toggleShowIcon = true;
    private bool _toggleShowText = true;
    private bool _slotPressed;

    private Toggle.ToggleVariant _togglePreviewVariant =>
        Enum.TryParse<Toggle.ToggleVariant>(_previewVariant, out var v) ? v : Toggle.ToggleVariant.Default;
    private Toggle.ToggleSize _togglePreviewSize =>
        Enum.TryParse<Toggle.ToggleSize>(_previewSize, out var s) ? s : Toggle.ToggleSize.Default;

    private string _interactiveVariantCode = @"<Segmented @bind-Value=""_variant"">
    <SegmentedItem Value=""Default"">Default</SegmentedItem>
    <SegmentedItem Value=""Outline"">Outline</SegmentedItem>
</Segmented>
<Toggle Variant=""@Enum.Parse<Toggle.ToggleVariant>(_variant)"" @bind-Pressed=""_pressed"">
    <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" /> Bold
</Toggle>

@code {
    private string _variant = ""Default"";
    private bool _pressed;
}";

    private string _interactiveSizeCode = @"<Segmented @bind-Value=""_size"">
    <SegmentedItem Value=""Sm"">Sm</SegmentedItem>
    <SegmentedItem Value=""Default"">Default</SegmentedItem>
    <SegmentedItem Value=""Lg"">Lg</SegmentedItem>
</Segmented>
<Toggle Size=""@Enum.Parse<Toggle.ToggleSize>(_size)"">
    <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" /> @_size
</Toggle>

@code {
    private string _size = ""Default"";
}";

    private string _interactiveSlotCode = @"<Switch @bind-Checked=""_showIcon"" />  Show icon
<Switch @bind-Checked=""_showText"" />  Show text

<Toggle @bind-Pressed=""_pressed"">
    @if (_showIcon)
    {
        <DynamicIcon Name=""Bold"" Class=""h-4 w-4"" />
    }
    @if (_showText)
    {
        <span>Bold</span>
    }
</Toggle>

@code {
    private bool _showIcon = true;
    private bool _showText = true;
    private bool _pressed;
}";
}
