@page "/components/cascader"

<PageTitle>Cascader — Lumeo</PageTitle>

<PageHeader Title="Cascader" Description="A multi-level dropdown for selecting hierarchical data like categories or locations." />

<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>Hierarchical selection like country, state, and city pickers</li>
        <li>Category drill-down for product catalogs or file systems</li>
        <li>Location pickers with multi-level geography data</li>
        <li>Any nested data structure where users select a path from root to leaf</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Cascader" Code="@_basicCode">
        <Cascader Options="@_options" Placeholder="Select location..." Class="max-w-sm" />
    </ComponentDemo>

    <ComponentDemo Title="Clearable" Code="@_clearableCode">
        <Cascader Options="@_options" Clearable="true" Placeholder="Select..." Class="max-w-sm" />
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <Cascader Options="@_options" Disabled="true" Placeholder="Disabled" Class="max-w-sm" />
    </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">Cascader</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">Options</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;CascaderOption&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Hierarchical options tree.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Value</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;string&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Selected value path (root to leaf).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Clearable</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">Show clear button.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Placeholder</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">"Select..."</td>
                            <td class="p-3 text-muted-foreground">Placeholder text.</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">Disable the cascader.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowSearch</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">Show a search input to filter options.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ValueChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;List&lt;string&gt;&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback for two-way binding when the selected path changes.</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. Syncs with a parent FormField.</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 error styling. Syncs with a parent FormField.</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 displayed below the field 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">Helper text shown below the field when not invalid.</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">Label rendered above the field (standalone, without FormField).</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 submission.</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">FormField.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; wires label, validation, and required state automatically.</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/select" class="text-primary hover:underline">Select</a> — Single-level dropdown for flat option lists</li>
        <li><a href="/components/combobox" class="text-primary hover:underline">Combobox</a> — Searchable dropdown for flat option lists with filtering</li>
        <li><a href="/components/breadcrumb" class="text-primary hover:underline">Breadcrumb</a> — Display the selected hierarchical path as a breadcrumb trail</li>
    </ul>
</div>

@code {
    private List<Cascader.CascaderOption> _options = new()
    {
        new()
        {
            Label = "North America", Value = "na",
            Children = new()
            {
                new()
                {
                    Label = "United States", Value = "us",
                    Children = new()
                    {
                        new() { Label = "California", Value = "ca" },
                        new() { Label = "New York", Value = "ny" },
                        new() { Label = "Texas", Value = "tx" },
                    }
                },
                new()
                {
                    Label = "Canada", Value = "can",
                    Children = new()
                    {
                        new() { Label = "Ontario", Value = "on" },
                        new() { Label = "British Columbia", Value = "bc" },
                    }
                },
            }
        },
        new()
        {
            Label = "Europe", Value = "eu",
            Children = new()
            {
                new() { Label = "United Kingdom", Value = "uk" },
                new() { Label = "Germany", Value = "de" },
                new() { Label = "France", Value = "fr" },
            }
        },
    };

    private string _basicCode = @"<Cascader Options=""@_options"" Placeholder=""Select location..."" />";
    private string _clearableCode = @"<Cascader Options=""@_options"" Clearable=""true"" />";
    private string _disabledCode = @"<Cascader Options=""@_options"" Disabled=""true"" />";
}
