@page "/components/checkbox"

<PageTitle>Checkbox — Lumeo</PageTitle>

<PageHeader Title="Checkbox" Description="A control that allows the user to toggle between checked and not checked." />

<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>Allow users to select multiple options from a list of choices.</li>
        <li>Present a single boolean toggle such as accepting terms and conditions.</li>
        <li>Implement "select all" patterns with indeterminate state for bulk actions.</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">
            <Checkbox @bind-Checked="_checked1" />
            <Label>Accept terms and conditions</Label>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="With Binding" Code="@_bindingCode">
        <Stack Gap="4">
            <Flex Gap="2" Align="center">
                <Checkbox @bind-Checked="_checked2" />
                <Label>Enable notifications</Label>
            </Flex>
            <Lumeo.Text Size="sm" Color="muted">Checked: @_checked2</Lumeo.Text>
        </Stack>
    </ComponentDemo>

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

    <ComponentDemo Title="Multiple Options" Code="@_multipleCode">
        <Stack Gap="3">
            <Flex Gap="2" Align="center">
                <Checkbox @bind-Checked="_optionA" />
                <Label>Option A</Label>
            </Flex>
            <Flex Gap="2" Align="center">
                <Checkbox @bind-Checked="_optionB" />
                <Label>Option B</Label>
            </Flex>
            <Flex Gap="2" Align="center">
                <Checkbox @bind-Checked="_optionC" />
                <Label>Option C</Label>
            </Flex>
            <Lumeo.Text Size="sm" Color="muted">Selected: @string.Join(", ", GetSelected())</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Indeterminate (Select All)" Code="@_indeterminateCode">
        <Stack Gap="3">
            <Flex Gap="2" Align="center">
                <Checkbox Checked="@_selectAll" CheckedChanged="@HandleSelectAllChanged" IsIndeterminate="@_isIndeterminate" />
                <Label>Select All</Label>
            </Flex>
            <Stack Gap="2" Class="ml-6">
                <Flex Gap="2" Align="center">
                    <Checkbox @bind-Checked="_item1" />
                    <Label>Item 1</Label>
                </Flex>
                <Flex Gap="2" Align="center">
                    <Checkbox @bind-Checked="_item2" />
                    <Label>Item 2</Label>
                </Flex>
                <Flex Gap="2" Align="center">
                    <Checkbox @bind-Checked="_item3" />
                    <Label>Item 3</Label>
                </Flex>
            </Stack>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Animated Check" Code="@_animatedCode">
        <Stack Gap="2">
            <Flex Gap="2" Align="center">
                <Checkbox Animated="true" @bind-Checked="_animatedChecked" />
                <Label>Draw-in check + box bounce</Label>
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Haptic Feedback (Mobile)" Code="@_hapticCode">
        <Stack Gap="3">
            <Lumeo.Text Size="sm" Color="muted">
                On supported mobile browsers, checking or unchecking this checkbox 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">
                <Checkbox HapticFeedback="true" @bind-Checked="_hapticChecked" />
                <Label>Haptic enabled — @(_hapticChecked ? "checked" : "unchecked")</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>Toggles the checkbox between checked and unchecked.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Tab</Kbd></TableCell><TableCell>Moves focus to the next focusable element.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Shift+Tab</Kbd></TableCell><TableCell>Moves focus to the previous 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">Checkbox</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 checkbox is checked. 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 checked 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 checkbox.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsIndeterminate</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 mixed/indeterminate state with a minus icon.</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 and checked, the check mark draws itself in via stroke-dasharray and the box plays a 200ms scale bounce.</td>
                        </tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">IsIndeterminateChanged</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">Two-way binding callback for the indeterminate flag.</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">Optional inline label rendered next to the checkbox.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Description</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">Secondary text shown below the label.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Id</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">Explicit HTML id; linked to the label for accessibility.</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 for screen readers when no visible label is present.</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 field as required for form validation.</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 a destructive ring to indicate a validation error.</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">Error message shown below when Invalid is true (standalone).</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">Help text shown below when there is no error (standalone).</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">HTML name attribute for form identification.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">FormField</td><td class="p-3 font-mono text-xs text-muted-foreground">FormFieldContext?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Cascaded context from a parent FormField; drives validation state automatically.</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 state change. Silently no-ops on browsers without the Vibration API (e.g. iOS Safari).</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/switch" class="text-primary hover:underline">Switch</a> — A toggle for on/off settings with immediate effect, like enabling dark mode.</li>
        <li><a href="/components/radio-group" class="text-primary hover:underline">RadioGroup</a> — Use when only one option can be selected from a list.</li>
        <li><a href="/components/toggle" class="text-primary hover:underline">Toggle</a> — A pressable button-style control for toggling a single state.</li>
    </ul>
</div>

@code {
    private bool _checked1;
    private bool _checked2 = true;
    private bool _optionA = true;
    private bool _optionB;
    private bool _optionC = true;
    private bool _animatedChecked;

    private string _animatedCode = @"<Checkbox Animated=""true"" @bind-Checked=""_checked"" />";

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

    private IEnumerable<string> GetSelected()
    {
        if (_optionA) yield return "A";
        if (_optionB) yield return "B";
        if (_optionC) yield return "C";
    }

    private string _defaultCode = @"<Flex Gap=""2"" Align=""center"">
    <Checkbox @bind-Checked=""_checked"" />
    <Label>Accept terms and conditions</Label>
</Flex>";

    private string _bindingCode = @"<Flex Gap=""2"" Align=""center"">
    <Checkbox @bind-Checked=""_checked"" />
    <Label>Enable notifications</Label>
</Flex>
<Lumeo.Text Size=""sm"" Color=""muted"">Checked: @_checked</Lumeo.Text>

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

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

    private string _multipleCode = @"<Checkbox @bind-Checked=""_optionA"" />
<Checkbox @bind-Checked=""_optionB"" />
<Checkbox @bind-Checked=""_optionC"" />";

    private bool _selectAll;
    private bool _item1 = true;
    private bool _item2;
    private bool _item3 = true;

    private bool _isIndeterminate => _item1 != _item2 || _item2 != _item3;

    private void HandleSelectAllChanged(bool value)
    {
        _selectAll = value;
        _item1 = value;
        _item2 = value;
        _item3 = value;
    }

    private string _indeterminateCode = @"<Flex Gap=""2"" Align=""center"">
    <Checkbox Checked=""@_selectAll"" CheckedChanged=""@HandleSelectAllChanged"" IsIndeterminate=""@_isIndeterminate"" />
    <Label>Select All</Label>
</Flex>
<Stack Gap=""2"" Class=""ml-6"">
    <Flex Gap=""2"" Align=""center"">
        <Checkbox @bind-Checked=""_item1"" />
        <Label>Item 1</Label>
    </Flex>
    <Flex Gap=""2"" Align=""center"">
        <Checkbox @bind-Checked=""_item2"" />
        <Label>Item 2</Label>
    </Flex>
    <Flex Gap=""2"" Align=""center"">
        <Checkbox @bind-Checked=""_item3"" />
        <Label>Item 3</Label>
    </Flex>
</Stack>

@code {
    private bool _selectAll;
    private bool _item1 = true;
    private bool _item2;
    private bool _item3 = true;
    private bool _isIndeterminate => _item1 != _item2 || _item2 != _item3;
    private void HandleSelectAllChanged(bool value)
    {
        _selectAll = value;
        _item1 = value;
        _item2 = value;
        _item3 = value;
    }
}";
}
