@page "/components/radio-group"

<PageTitle>Radio Group — Lumeo</PageTitle>

<PageHeader Title="Radio Group" Description="A set of mutually exclusive radio buttons for single-option selection." />

<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>Single selection from a small set of visible options (typically 2-5 choices)</li>
        <li>Settings and preferences where users need to see all options at once</li>
        <li>Plan or tier selection cards in pricing pages</li>
        <li>Notification or display preference toggles within forms</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <RadioGroup @bind-Value="_selected">
                <Flex Gap="2" Align="center">
                    <RadioGroupItem Value="default" />
                    <Label>Default</Label>
                </Flex>
                <Flex Gap="2" Align="center">
                    <RadioGroupItem Value="comfortable" />
                    <Label>Comfortable</Label>
                </Flex>
                <Flex Gap="2" Align="center">
                    <RadioGroupItem Value="compact" />
                    <Label>Compact</Label>
                </Flex>
            </RadioGroup>
            @if (!string.IsNullOrEmpty(_selected))
            {
                <Lumeo.Text Size="sm" Color="muted" Class="mt-4">Selected: @_selected</Lumeo.Text>
            }
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Pricing Plan" Code="@_planCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <RadioGroup @bind-Value="_plan" Class="grid grid-cols-3 gap-2">
                @foreach (var p in new[] { ("free", "Free", "$0"), ("pro", "Pro", "$15"), ("enterprise", "Team", "$49") })
                {
                    var planVal = p.Item1;
                    <label class="@($"flex flex-col items-center justify-center rounded-md border p-3 cursor-pointer transition-colors {(_plan == planVal ? "border-primary bg-primary/5" : "border-muted")}")">
                        <RadioGroupItem Value="@planVal" Class="sr-only" />
                        <Lumeo.Text As="span" Size="sm" Weight="semibold" Color="foreground">@p.Item2</Lumeo.Text>
                        <Lumeo.Text As="span" Size="xs" Color="muted">@p.Item3/mo</Lumeo.Text>
                    </label>
                }
            </RadioGroup>
            <Lumeo.Text Size="sm" Color="muted" Class="mt-3">Selected plan: @(_plan ?? "none")</Lumeo.Text>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Form Field" Code="@_formCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <FormField Name="plan">
                <FormItem>
                    <FormLabel>Notification preference</FormLabel>
                    <RadioGroup @bind-Value="_notification">
                        <Flex Gap="2" Align="center">
                            <RadioGroupItem Value="all" />
                            <Label>All notifications</Label>
                        </Flex>
                        <Flex Gap="2" Align="center">
                            <RadioGroupItem Value="mentions" />
                            <Label>Mentions only</Label>
                        </Flex>
                        <Flex Gap="2" Align="center">
                            <RadioGroupItem Value="none" />
                            <Label>None</Label>
                        </Flex>
                    </RadioGroup>
                    <FormDescription>Choose how you want to be notified.</FormDescription>
                </FormItem>
            </FormField>
        </Container>
    </ComponentDemo>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="radiogroup" Level="3" Class="mt-8 scroll-mt-20">RadioGroup</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The radio group content (RadioGroupItem or RadioGroupCard elements).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Value</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Currently selected value. Use with @@bind-Value.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ValueChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;string&gt;</TableCell><TableCell Class="font-mono text-xs">-</TableCell><TableCell>Callback invoked when the selected value changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AriaLabel</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Accessible label for the radio group.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AriaLabelledBy</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>ID of the element that labels the radio group.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Required</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Marks the field as required for form validation.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Invalid</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Applies error styling to indicate a validation error.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ErrorText</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Error message shown below when Invalid is true (standalone).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">HelperText</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Help text shown below when there is no error (standalone).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Label</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Inline label rendered above the group (standalone).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Name</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>HTML name attribute for form identification.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">FormField</TableCell><TableCell Class="font-mono text-xs">FormFieldContext?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Cascaded context from a parent FormField; drives validation state automatically.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="radiogroupitem" Level="3" Class="mt-8 scroll-mt-20">RadioGroupItem</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Value</TableCell><TableCell Class="font-mono text-xs">string</TableCell><TableCell Class="font-mono text-xs">""</TableCell><TableCell>The value this radio item represents. Required.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Disabled</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Disables the radio item.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Description</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Secondary text shown below the item label.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="radiogroupcard" Level="3" Class="mt-8 scroll-mt-20">RadioGroupCard</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The card content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Value</TableCell><TableCell Class="font-mono text-xs">string</TableCell><TableCell Class="font-mono text-xs">""</TableCell><TableCell>The value this card represents. Required.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<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/select" class="text-primary hover:underline">Select</a> — Dropdown selection when the option list is long or space is limited</li>
        <li><a href="/components/checkbox" class="text-primary hover:underline">Checkbox</a> — Multi-select when users can choose more than one option</li>
        <li><a href="/components/toggle-group" class="text-primary hover:underline">ToggleGroup</a> — Compact button-style single selection for toolbar-like UIs</li>
    </ul>
</div>

@code {
    private string? _selected = "default";
    private string? _notification = "all";
    private string? _plan = "pro";

    private string _defaultCode = @"<RadioGroup @bind-Value=""_selected"">
    <Flex Gap=""2"" Align=""center"">
        <RadioGroupItem Value=""default"" />
        <Label>Default</Label>
    </Flex>
    <Flex Gap=""2"" Align=""center"">
        <RadioGroupItem Value=""comfortable"" />
        <Label>Comfortable</Label>
    </Flex>
    <Flex Gap=""2"" Align=""center"">
        <RadioGroupItem Value=""compact"" />
        <Label>Compact</Label>
    </Flex>
</RadioGroup>";

    private string _planCode = @"<RadioGroup @bind-Value=""_plan"" Class=""grid grid-cols-3 gap-2"">
    @foreach (var p in new[] { (""free"", ""Free"", ""$0""), (""pro"", ""Pro"", ""$15""), (""team"", ""Team"", ""$49"") })
    {
        <label class=""@($""flex flex-col items-center rounded-md border p-3 cursor-pointer {(_plan == p.Item1 ? \""border-primary\"" : \""border-muted\"")}"")>
            <RadioGroupItem Value=""@p.Item1"" Class=""sr-only"" />
            <Lumeo.Text As=""span"" Size=""sm"" Weight=""semibold"">@p.Item2</Lumeo.Text>
            <Lumeo.Text As=""span"" Size=""xs"" Color=""muted"">@p.Item3/mo</Lumeo.Text>
        </label>
    }
</RadioGroup>";

    private string _formCode = @"<FormField Name=""plan"">
    <FormItem>
        <FormLabel>Notification preference</FormLabel>
        <RadioGroup @bind-Value=""_notification"">
            <Flex Gap=""2"" Align=""center"">
                <RadioGroupItem Value=""all"" />
                <Label>All notifications</Label>
            </Flex>
            <Flex Gap=""2"" Align=""center"">
                <RadioGroupItem Value=""mentions"" />
                <Label>Mentions only</Label>
            </Flex>
        </RadioGroup>
        <FormDescription>Choose how you want to be notified.</FormDescription>
    </FormItem>
</FormField>";
}
