@page "/components/transfer"

<PageTitle>Transfer — Lumeo</PageTitle>

<PageHeader Title="Transfer" Description="A dual-panel list for moving items between source and target collections." />

<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>Moving items between two lists such as available vs. selected</li>
        <li>Permission assignment where roles or features are toggled between pools</li>
        <li>Category management for organizing items into groups</li>
        <li>Team or resource allocation from a shared pool</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Transfer" Code="@_codeBasic">
        <Transfer @bind-SourceItems="_source" @bind-TargetItems="_target"
                  SourceTitle="Available" TargetTitle="Selected" />
    </ComponentDemo>

    <ComponentDemo Title="OnChange — interactive" Description="Move items between panels; the last change event is shown below." Code="@_codeOnChange">
        <Stack Gap="3">
            <Transfer @bind-SourceItems="_source3" @bind-TargetItems="_target3"
                      SourceTitle="Available" TargetTitle="Selected"
                      OnChange="@(args => _transferLastChange = $"Moved {args.MovedItems.Count} item(s) → {(args.Direction == "right" ? "Selected" : "Available")}")" />
            @if (_transferLastChange is not null)
            {
                <Lumeo.Text Size="sm" Color="muted">Last change: @_transferLastChange</Lumeo.Text>
            }
            else
            {
                <Lumeo.Text Size="sm" Color="muted">Select items and click an arrow to transfer.</Lumeo.Text>
            }
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="With Search" Code="@_codeSearch">
        <Transfer @bind-SourceItems="_source2" @bind-TargetItems="_target2"
                  SourceTitle="Users" TargetTitle="Team"
                  ShowSearch="true" />
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2" Class="text-2xl font-bold text-foreground">API Reference</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">SourceItems</td><td class="p-3 font-mono text-xs text-muted-foreground">List&lt;TransferItem&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Items in the source panel.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">TargetItems</td><td class="p-3 font-mono text-xs text-muted-foreground">List&lt;TransferItem&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Items in the target panel.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">SourceTitle</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">"Source"</td><td class="p-3 text-muted-foreground">Source panel heading.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">TargetTitle</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">"Target"</td><td class="p-3 text-muted-foreground">Target panel heading.</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 search input in both panels.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">OnChange</td><td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;TransferChangeEventArgs&gt;</td><td class="p-3 font-mono text-xs text-muted-foreground">—</td><td class="p-3 text-muted-foreground">Fired when items are moved between panels.</td></tr>
                                    <tr>
                            <td class="p-3 font-mono text-xs text-primary">SourceItemsChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;List&lt;TransferItem&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 for the source list.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">TargetItemsChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;List&lt;TransferItem&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 for the target list.</td>
                        </tr>
</tbody>
        </table>
    </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 or multi-select dropdown for simpler selection needs</li>
        <li><a href="/components/sortable-list" class="text-primary hover:underline">SortableList</a> — Reorderable list with drag-and-drop</li>
        <li><a href="/components/checkbox" class="text-primary hover:underline">Checkbox</a> — Individual toggle selection for smaller item sets</li>
    </ul>
</div>

@code {
    private List<Transfer.TransferItem> _source = new()
    {
        new("HTML", "html"), new("CSS", "css"), new("JavaScript", "js"),
        new("TypeScript", "ts"), new("C#", "csharp"), new("Python", "python"),
    };
    private List<Transfer.TransferItem> _target = new()
    {
        new("Blazor", "blazor"), new("React", "react"),
    };

    private List<Transfer.TransferItem> _source3 = new()
    {
        new("Alpha", "alpha"), new("Beta", "beta"), new("Gamma", "gamma"),
        new("Delta", "delta"), new("Epsilon", "epsilon"),
    };
    private List<Transfer.TransferItem> _target3 = new()
    {
        new("Zeta", "zeta"),
    };
    private string? _transferLastChange;

    private string _codeOnChange = @"<Transfer @bind-SourceItems=""_source"" @bind-TargetItems=""_target""
          OnChange=""@(args => _lastChange = $""Moved {args.MovedItems.Count} item(s) → {(args.Direction == """"right"""" ? """"Selected"""" : """"Available"""")}"")""
          SourceTitle=""Available"" TargetTitle=""Selected"" />
@if (_lastChange is not null)
{
    <Lumeo.Text Size=""sm"" Color=""muted"">Last change: @_lastChange</Lumeo.Text>
}

@code { private string? _lastChange; }";

    private List<Transfer.TransferItem> _source2 = new()
    {
        new("Alice", "alice"), new("Bob", "bob"), new("Charlie", "charlie"),
        new("Diana", "diana"), new("Eve", "eve"),
    };
    private List<Transfer.TransferItem> _target2 = new()
    {
        new("Frank", "frank"),
    };

    private string _codeBasic = @"<Transfer @bind-SourceItems=""_source"" @bind-TargetItems=""_target""
          SourceTitle=""Available"" TargetTitle=""Selected"" />";

    private string _codeSearch = @"<Transfer @bind-SourceItems=""_source"" @bind-TargetItems=""_target""
          SourceTitle=""Users"" TargetTitle=""Team"" ShowSearch=""true"" />";
}
