@page "/components/tree-select"

<PageTitle>Tree Select — Lumeo</PageTitle>

<PageHeader Title="Tree Select" Description="A dropdown selector with a hierarchical tree structure — ideal for selecting categories, org chart nodes, or nested data." />

<Stack Gap="8">
    <ComponentDemo Title="Basic Tree Select" Code="@_basicCode">
        <Stack Gap="3">
            <TreeSelect @bind-Value="_selected" Items="@_categories" Class="w-72" />
            <Lumeo.Text Class="text-sm text-muted-foreground">Selected: @(_selected ?? "none")</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Searchable" Code="@_searchCode">
        <TreeSelect @bind-Value="_selected2" Items="@_categories" Searchable="true" Class="w-72" />
    </ComponentDemo>

    <ComponentDemo Title="Multi-select" Code="@_multiCode">
        <Stack Gap="3">
            <TreeSelect Values="@_multiValues" ValuesChanged="@(v => _multiValues = v)"
                        Items="@_categories" Multiple="true" Searchable="true" Class="w-72" />
            <Lumeo.Text Class="text-sm text-muted-foreground">
                Selected: @(string.Join(", ", _multiValues ?? new()))
            </Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Expand All" Code="@_expandCode">
        <TreeSelect @bind-Value="_selected3" Items="@_categories" ExpandAll="true" Class="w-72" />
    </ComponentDemo>

    <ComponentDemo Title="With Disabled Items" Code="@_disabledItemCode">
        <TreeSelect @bind-Value="_selected4" Items="@_categoriesWithDisabled" Class="w-72" />
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack Gap="8">
        <Stack>
            <Heading Level="3" Class="mb-3">TreeSelect</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">Value</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">—</td>
                            <td class="p-3 text-muted-foreground">The selected item value (single-select mode). Supports two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Values</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 item values (multi-select mode). Supports two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Items</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;TreeSelectItem&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">[]</td>
                            <td class="p-3 text-muted-foreground">The tree data. Each item can have Children for nesting.</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 shown when no value is selected.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Searchable</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">Enable a search box at the top of the dropdown.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Multiple</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">Allow selecting multiple items (use Values/ValuesChanged).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ExpandAll</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">Expand all nodes by default when the dropdown opens.</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 select control.</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;string&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 (single-select mode).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ValuesChanged</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">Two-way binding callback (multi-select mode).</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>
            <Heading Level="3" Class="mb-3">TreeSelectItem</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">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <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 text-muted-foreground">Display text for the node.</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">string</td>
                            <td class="p-3 text-muted-foreground">Unique value for the node used in selection.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Children</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;TreeSelectItem&gt;?</td>
                            <td class="p-3 text-muted-foreground">Child nodes for nested tree structure.</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 text-muted-foreground">Prevent this node from being selected.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Icon</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 text-muted-foreground">Optional icon shown before the label.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private string? _selected;
    private string? _selected2;
    private string? _selected3;
    private string? _selected4;
    private List<string>? _multiValues;

    private List<TreeSelect.TreeSelectItem> _categories = new()
    {
        new() { Label = "Electronics", Value = "electronics", Children = new()
        {
            new() { Label = "Phones", Value = "phones", Children = new()
            {
                new() { Label = "Smartphones", Value = "smartphones" },
                new() { Label = "Feature Phones", Value = "feature-phones" },
            }},
            new() { Label = "Computers", Value = "computers", Children = new()
            {
                new() { Label = "Laptops", Value = "laptops" },
                new() { Label = "Desktops", Value = "desktops" },
            }},
            new() { Label = "Audio", Value = "audio" },
        }},
        new() { Label = "Clothing", Value = "clothing", Children = new()
        {
            new() { Label = "Men", Value = "men" },
            new() { Label = "Women", Value = "women" },
            new() { Label = "Kids", Value = "kids" },
        }},
        new() { Label = "Books", Value = "books" },
    };

    private List<TreeSelect.TreeSelectItem> _categoriesWithDisabled = new()
    {
        new() { Label = "Electronics", Value = "electronics", Children = new()
        {
            new() { Label = "Phones", Value = "phones" },
            new() { Label = "Tablets", Value = "tablets", Disabled = true },
            new() { Label = "Laptops", Value = "laptops" },
        }},
        new() { Label = "Discontinued", Value = "discontinued", Disabled = true, Children = new()
        {
            new() { Label = "Old Product", Value = "old" },
        }},
        new() { Label = "Books", Value = "books" },
    };

    private string _basicCode = @"<TreeSelect @bind-Value=""_selected"" Items=""@_categories"" />

@code {
    private string? _selected;
    private List<TreeSelect.TreeSelectItem> _categories = new()
    {
        new() { Label = ""Electronics"", Value = ""electronics"", Children = new()
        {
            new() { Label = ""Phones"", Value = ""phones"" },
            new() { Label = ""Computers"", Value = ""computers"" },
        }},
        new() { Label = ""Books"", Value = ""books"" },
    };
}";

    private string _searchCode = @"<TreeSelect @bind-Value=""_selected"" Items=""@_categories"" Searchable=""true"" />";
    private string _multiCode = @"<TreeSelect Values=""@_values"" ValuesChanged=""@(v => _values = v)""
            Items=""@_categories"" Multiple=""true"" Searchable=""true"" />";
    private string _expandCode = @"<TreeSelect @bind-Value=""_selected"" Items=""@_categories"" ExpandAll=""true"" />";
    private string _disabledItemCode = @"<!-- Set Disabled=true on individual TreeSelectItem objects to prevent selection -->";
}
