@page "/components/switch"

<PageTitle>Switch — Lumeo</PageTitle>

<PageHeader Title="Switch" Description="A control that allows the user to toggle between two states." />

<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>Toggle binary settings such as on/off, enabled/disabled, or active/inactive</li>
        <li>Control feature flags or preferences in settings panels</li>
        <li>Provide instant feedback when a state change takes effect immediately</li>
        <li>Replace checkboxes when the toggle represents a real-time switch rather than a form submission</li>
        <li>Build notification preference panels with multiple independent toggles</li>
    </ul>
</div>

<div class="mt-6">
    <Alert Variant="Alert.AlertVariant.Info" ShowIcon="true">
        <ChildContent>
            For validation, label, and helper text, wrap this input in <code class="font-mono text-xs">&lt;FormField&gt;</code>.
            See <a href="/components/form#validation-pattern" class="underline font-medium">Form &rsaquo; Validation Pattern</a>.
        </ChildContent>
    </Alert>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Flex Gap="2" Align="center">
            <Switch @bind-Checked="_checked1" />
            <Label>Airplane Mode</Label>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="With Binding" Code="@_bindingCode">
        <Stack Gap="4">
            <Flex Gap="2" Align="center">
                <Switch @bind-Checked="_checked2" />
                <Label>Dark Mode</Label>
            </Flex>
            <Lumeo.Text Size="sm" Color="muted">Dark Mode is @(_checked2 ? "on" : "off")</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <Stack Gap="3">
            <Flex Gap="2" Align="center">
                <Switch Checked="false" Disabled="true" />
                <Label Class="text-muted-foreground">Disabled off</Label>
            </Flex>
            <Flex Gap="2" Align="center">
                <Switch Checked="true" Disabled="true" />
                <Label Class="text-muted-foreground">Disabled on</Label>
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Settings Example" Code="@_settingsCode">
        <Stack Gap="4" Class="w-full max-w-sm">
            <Flex Align="center" Justify="between">
                <Stack Gap="0">
                    <Lumeo.Text Size="sm" Weight="medium" Leading="none">Email Notifications</Lumeo.Text>
                    <Lumeo.Text Size="sm" Color="muted">Receive emails about account activity.</Lumeo.Text>
                </Stack>
                <Switch @bind-Checked="_emailNotif" />
            </Flex>
            <Flex Align="center" Justify="between">
                <Stack Gap="0">
                    <Lumeo.Text Size="sm" Weight="medium" Leading="none">Marketing Emails</Lumeo.Text>
                    <Lumeo.Text Size="sm" Color="muted">Receive emails about new products and features.</Lumeo.Text>
                </Stack>
                <Switch @bind-Checked="_marketingNotif" />
            </Flex>
            <Flex Align="center" Justify="between">
                <Stack Gap="0">
                    <Lumeo.Text Size="sm" Weight="medium" Leading="none">Security Alerts</Lumeo.Text>
                    <Lumeo.Text Size="sm" Color="muted">Receive alerts about unusual activity.</Lumeo.Text>
                </Stack>
                <Switch @bind-Checked="_securityNotif" />
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizesCode">
        <Flex Gap="6" Align="center">
            <Flex Gap="2" Align="center">
                <Switch Size="Switch.SwitchSize.Sm" />
                <Label Class="text-sm">Small</Label>
            </Flex>
            <Flex Gap="2" Align="center">
                <Switch />
                <Label Class="text-sm">Default</Label>
            </Flex>
            <Flex Gap="2" Align="center">
                <Switch Size="Switch.SwitchSize.Lg" />
                <Label Class="text-sm">Large</Label>
            </Flex>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Animated (Spring)" Code="@_animatedCode">
        <Flex Gap="4" Align="center">
            <Switch Animated="true" />
            <Label Class="text-sm">Spring-eased thumb</Label>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Size — interactive preview" Code="@_interactiveSizeCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a size to see the switch scale live.</Lumeo.Text>
            <Segmented @bind-Value="_previewSwitchSize">
                <SegmentedItem Value="Sm">Sm</SegmentedItem>
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Lg">Lg</SegmentedItem>
            </Segmented>
            <Flex Gap="3" Align="center">
                <Switch Size="_switchSizeEnum" @bind-Checked="_previewSwitchChecked" />
                <Label Class="text-sm">@_previewSwitchSize — @(_previewSwitchChecked ? "on" : "off")</Label>
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Haptic Feedback (Mobile)" Code="@_hapticCode">
        <Stack Gap="3">
            <Lumeo.Text Size="sm" Color="muted">
                On supported mobile browsers, toggling this switch triggers a short vibration via <code class="font-mono text-xs">navigator.vibrate(10)</code>. Desktop browsers silently no-op.
            </Lumeo.Text>
            <Flex Gap="2" Align="center">
                <Switch HapticFeedback="true" @bind-Checked="_hapticChecked" />
                <Label Class="text-sm">Haptic enabled — @(_hapticChecked ? "on" : "off")</Label>
            </Flex>
        </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>Toggle the switch between on and off</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Tab</Kbd></TableCell><TableCell>Move 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" Class="mt-8">
        <Stack Gap="3">
            <Heading Level="3">Switch</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">Checked</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 switch is toggled on. Use with @@bind-Checked for two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">CheckedChanged</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 switch state changes.</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 user interaction and dims the switch.</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">SwitchSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Size variant. Values: Sm, Default, Lg.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Animated</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, the thumb animates with a bouncy spring cubic-bezier timing instead of the default linear transition.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">Loading</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">Shows a spinner on the thumb while an async toggle is in progress.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnLabel</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">Label rendered inside the track when checked.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OffLabel</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">Label rendered inside the track when unchecked.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">HapticFeedback</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, triggers a short haptic vibration via navigator.vibrate(10) on each toggle. Silently no-ops on browsers without the Vibration API (e.g. iOS Safari).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Required</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">Marks the switch as required within an enclosing form.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Invalid</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">Applies an error visual state and aria-invalid for validation failures.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ErrorText</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">Validation message shown beneath the switch when Invalid is true.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">HelperText</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">Supplementary description rendered beneath the switch.</td>
                        </tr>
                        <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 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Visible label rendered alongside the switch control.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Name</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">Form field name submitted with the switch's checked state.</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 name exposed via aria-label; recommended for icon-only switches without visible text.</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/checkbox" class="text-primary hover:underline">Checkbox</a> — Use when the selection is part of a form that is submitted, rather than an instant toggle</li>
        <li><a href="/components/toggle" class="text-primary hover:underline">Toggle</a> — Use for toolbar-style on/off buttons with icon support</li>
        <li><a href="/components/radio-group" class="text-primary hover:underline">RadioGroup</a> — Use when selecting one option from multiple mutually exclusive choices</li>
    </ul>
</div>

@code {
    private bool _checked1;
    private bool _checked2 = true;
    private bool _emailNotif = true;
    private bool _marketingNotif;
    private bool _securityNotif = true;

    private string _defaultCode = @"<Flex Gap=""2"" Align=""center"">
    <Switch @bind-Checked=""_checked"" />
    <Label>Airplane Mode</Label>
</Flex>

@code {
    private bool _checked;
}";

    private string _bindingCode = @"<Switch @bind-Checked=""_checked"" />
<Lumeo.Text Size=""sm"" Color=""muted"">Dark Mode is @(_checked ? ""on"" : ""off"")</Lumeo.Text>

@code {
    private bool _checked = true;
}";

    private string _disabledCode = @"<Switch Checked=""false"" Disabled=""true"" />
<Switch Checked=""true"" Disabled=""true"" />";

    private string _settingsCode = @"<Flex Align=""center"" Justify=""between"">
    <Stack Gap=""0"">
        <Lumeo.Text Size=""sm"" Weight=""medium"" Leading=""none"">Email Notifications</Lumeo.Text>
        <Lumeo.Text Size=""sm"" Color=""muted"">Receive emails about account activity.</Lumeo.Text>
    </Stack>
    <Switch @bind-Checked=""_emailNotif"" />
</Flex>";

    private string _sizesCode = @"<Flex Gap=""2"" Align=""center"">
    <Switch Size=""Switch.SwitchSize.Sm"" />
    <Label Class=""text-sm"">Small</Label>
</Flex>
<Flex Gap=""2"" Align=""center"">
    <Switch />
    <Label Class=""text-sm"">Default</Label>
</Flex>
<Flex Gap=""2"" Align=""center"">
    <Switch Size=""Switch.SwitchSize.Lg"" />
    <Label Class=""text-sm"">Large</Label>
</Flex>";

    private string _animatedCode = @"<Switch Animated=""true"" />";

    private string _previewSwitchSize = "Default";
    private bool _previewSwitchChecked;
    private Switch.SwitchSize _switchSizeEnum =>
        Enum.TryParse<Switch.SwitchSize>(_previewSwitchSize, out var s) ? s : Switch.SwitchSize.Default;

    private bool _hapticChecked;
    private string _hapticCode = @"<Switch HapticFeedback=""true"" @bind-Checked=""_checked"" />

@code {
    private bool _checked;
}";

    private string _interactiveSizeCode = @"<Segmented @bind-Value=""_size"">
    <SegmentedItem Value=""Sm"">Sm</SegmentedItem>
    <SegmentedItem Value=""Default"">Default</SegmentedItem>
    <SegmentedItem Value=""Lg"">Lg</SegmentedItem>
</Segmented>
<Switch Size=""@Enum.Parse<Switch.SwitchSize>(_size)"" @bind-Checked=""_checked"" />

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