@page "/components/splitter"

<PageTitle>Splitter — Lumeo</PageTitle>

<PageHeader Title="Splitter" Description="Multi-pane resizable layout for dashboards, editors, and IDE-style UIs. Supports horizontal, vertical, and nested arrangements." />

<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>Editor layouts with sidebar, main content, and inspector panels</li>
        <li>Dashboards where users adjust the size of multiple regions at once</li>
        <li>File manager style tri-panels (tree, list, preview)</li>
        <li>Anywhere Resizable's 2-pane model is not enough — Splitter accepts N panes</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Two Panes — Horizontal" Code="@_codeTwo">
        <div class="w-full max-w-2xl">
            <Splitter Orientation="Splitter.SplitterOrientation.Horizontal" Class="min-h-[200px] rounded-lg border border-border/40">
                <SplitterPane Size="50">
                    <div class="h-full flex items-center justify-center p-6">
                        <span class="font-semibold">Left</span>
                    </div>
                </SplitterPane>
                <SplitterDivider />
                <SplitterPane Size="50">
                    <div class="h-full flex items-center justify-center p-6">
                        <span class="font-semibold">Right</span>
                    </div>
                </SplitterPane>
            </Splitter>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Three Panes — Sidebar + Main + Aside" Code="@_codeThree">
        <div class="w-full max-w-3xl">
            <Splitter Orientation="Splitter.SplitterOrientation.Horizontal" Class="min-h-[260px] rounded-lg border border-border/40">
                <SplitterPane Size="20" MinSize="10">
                    <div class="h-full p-4 bg-muted/30">
                        <div class="font-semibold text-sm">Sidebar</div>
                        <p class="text-xs text-muted-foreground mt-1">Navigation</p>
                    </div>
                </SplitterPane>
                <SplitterDivider />
                <SplitterPane Size="55">
                    <div class="h-full p-4">
                        <div class="font-semibold text-sm">Main</div>
                        <p class="text-xs text-muted-foreground mt-1">Primary content area</p>
                    </div>
                </SplitterPane>
                <SplitterDivider />
                <SplitterPane Size="25" MinSize="10">
                    <div class="h-full p-4 bg-muted/30">
                        <div class="font-semibold text-sm">Aside</div>
                        <p class="text-xs text-muted-foreground mt-1">Inspector</p>
                    </div>
                </SplitterPane>
            </Splitter>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Vertical Stack" Code="@_codeVertical">
        <div class="w-full max-w-2xl">
            <Splitter Orientation="Splitter.SplitterOrientation.Vertical" Class="h-[320px] rounded-lg border border-border/40">
                <SplitterPane Size="60">
                    <div class="h-full p-4">
                        <div class="font-semibold text-sm">Editor</div>
                    </div>
                </SplitterPane>
                <SplitterDivider />
                <SplitterPane Size="40">
                    <div class="h-full p-4 bg-muted/30">
                        <div class="font-semibold text-sm">Terminal</div>
                    </div>
                </SplitterPane>
            </Splitter>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Nested — Horizontal containing Vertical" Code="@_codeNested">
        <div class="w-full max-w-3xl">
            <Splitter Orientation="Splitter.SplitterOrientation.Horizontal" Class="h-[360px] rounded-lg border border-border/40">
                <SplitterPane Size="25" MinSize="15">
                    <div class="h-full p-4 bg-muted/30">
                        <div class="font-semibold text-sm">Files</div>
                    </div>
                </SplitterPane>
                <SplitterDivider />
                <SplitterPane Size="75">
                    <Splitter Orientation="Splitter.SplitterOrientation.Vertical" Class="h-full">
                        <SplitterPane Size="65">
                            <div class="h-full p-4">
                                <div class="font-semibold text-sm">Code</div>
                            </div>
                        </SplitterPane>
                        <SplitterDivider />
                        <SplitterPane Size="35">
                            <div class="h-full p-4 bg-muted/30">
                                <div class="font-semibold text-sm">Output</div>
                            </div>
                        </SplitterPane>
                    </Splitter>
                </SplitterPane>
            </Splitter>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Orientation — interactive" Code="@_orientationInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a value to see it applied live. <strong>Horizontal</strong> places the divider vertically between side-by-side panes; <strong>Vertical</strong> places the divider horizontally between stacked panes.</Lumeo.Text>
            <Segmented @bind-Value="_splitterOrientationSel" Options="_splitterOrientationOptions" />
            <div class="w-full max-w-2xl">
                <Splitter Orientation="@_activeSplitterOrientation" Class="@($"{(_activeSplitterOrientation == Splitter.SplitterOrientation.Horizontal ? "min-h-[200px]" : "min-h-[300px]")} rounded-lg border border-border/40")">
                    <SplitterPane Size="50">
                        <div class="h-full flex items-center justify-center p-6">
                            <span class="font-semibold text-sm">Pane A</span>
                        </div>
                    </SplitterPane>
                    <SplitterDivider />
                    <SplitterPane Size="50">
                        <div class="h-full flex items-center justify-center p-6">
                            <span class="font-semibold text-sm">Pane B</span>
                        </div>
                    </SplitterPane>
                </Splitter>
            </div>
        </Stack>
    </ComponentDemo>
</Stack>

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

    <Heading Id="splitter" Level="3" Class="mt-8 scroll-mt-20">Splitter</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[200px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Orientation</TableCell><TableCell Class="font-mono text-xs">SplitterOrientation</TableCell><TableCell Class="font-mono text-xs">Horizontal</TableCell><TableCell>Layout direction. Values: Horizontal, Vertical.</TableCell></TableRow>
                <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>SplitterPane and SplitterDivider children.</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="splitter-pane" Level="3" Class="mt-8 scroll-mt-20">SplitterPane</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[200px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Size</TableCell><TableCell Class="font-mono text-xs">double</TableCell><TableCell Class="font-mono text-xs">0</TableCell><TableCell>Initial size as a percentage. 0 means distribute remaining space equally among unset panes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">MinSize</TableCell><TableCell Class="font-mono text-xs">double</TableCell><TableCell Class="font-mono text-xs">10</TableCell><TableCell>Minimum size percentage.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">MaxSize</TableCell><TableCell Class="font-mono text-xs">double</TableCell><TableCell Class="font-mono text-xs">90</TableCell><TableCell>Maximum size percentage.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Collapsible</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Reserved for future collapse behavior.</TableCell></TableRow>
                <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>Pane content.</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="splitter-divider" Level="3" Class="mt-8 scroll-mt-20">SplitterDivider</Heading>
    <p class="mt-2 text-sm text-muted-foreground">Place a <code class="font-mono text-xs">SplitterDivider</code> between each pair of <code class="font-mono text-xs">SplitterPane</code> elements you want to resize. It binds to the nearest pane on each side at drag time.</p>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[200px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <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/resizable" class="text-primary hover:underline">Resizable</a> — Simpler two-panel resizable group</li>
        <li><a href="/components/sidebar" class="text-primary hover:underline">Sidebar</a> — App-level collapsible navigation sidebar</li>
        <li><a href="/components/scroll-area" class="text-primary hover:underline">ScrollArea</a> — Styled scrollable container for overflowing pane content</li>
    </ul>
</div>

@code {
    // Interactive: Orientation
    private string _splitterOrientationSel = "Horizontal";
    private Splitter.SplitterOrientation _activeSplitterOrientation => Enum.Parse<Splitter.SplitterOrientation>(_splitterOrientationSel);
    private List<Segmented.SegmentedOption> _splitterOrientationOptions = new()
    {
        new() { Label = "Horizontal", Value = "Horizontal" },
        new() { Label = "Vertical", Value = "Vertical" },
    };
    private string _orientationInteractiveCode = @"<Segmented @bind-Value=""_orientationSel"" Options=""_orientationOptions"" />
<Splitter Orientation=""@_activeSplitterOrientation"" Class=""min-h-[200px] rounded-lg border border-border/40"">
    <SplitterPane Size=""50"">
        <div class=""h-full flex items-center justify-center p-6"">Pane A</div>
    </SplitterPane>
    <SplitterDivider />
    <SplitterPane Size=""50"">
        <div class=""h-full flex items-center justify-center p-6"">Pane B</div>
    </SplitterPane>
</Splitter>

@code {
    private string _orientationSel = ""Horizontal"";
    private Splitter.SplitterOrientation _activeSplitterOrientation =>
        Enum.Parse<Splitter.SplitterOrientation>(_orientationSel);
    private List<Segmented.SegmentedOption> _orientationOptions = new()
    {
        new() { Label = ""Horizontal"", Value = ""Horizontal"" },
        new() { Label = ""Vertical"", Value = ""Vertical"" },
    };
}";

    private string _codeTwo = @"<Splitter Orientation=""Splitter.SplitterOrientation.Horizontal""
          Class=""min-h-[200px] rounded-lg border"">
    <SplitterPane Size=""50"">Left</SplitterPane>
    <SplitterDivider />
    <SplitterPane Size=""50"">Right</SplitterPane>
</Splitter>";

    private string _codeThree = @"<Splitter Orientation=""Splitter.SplitterOrientation.Horizontal""
          Class=""min-h-[260px] rounded-lg border"">
    <SplitterPane Size=""20"" MinSize=""10"">Sidebar</SplitterPane>
    <SplitterDivider />
    <SplitterPane Size=""55"">Main</SplitterPane>
    <SplitterDivider />
    <SplitterPane Size=""25"" MinSize=""10"">Aside</SplitterPane>
</Splitter>";

    private string _codeVertical = @"<Splitter Orientation=""Splitter.SplitterOrientation.Vertical""
          Class=""h-[320px] rounded-lg border"">
    <SplitterPane Size=""60"">Editor</SplitterPane>
    <SplitterDivider />
    <SplitterPane Size=""40"">Terminal</SplitterPane>
</Splitter>";

    private string _codeNested = @"<Splitter Orientation=""Splitter.SplitterOrientation.Horizontal""
          Class=""h-[360px] rounded-lg border"">
    <SplitterPane Size=""25"">Files</SplitterPane>
    <SplitterDivider />
    <SplitterPane Size=""75"">
        <Splitter Orientation=""Splitter.SplitterOrientation.Vertical"" Class=""h-full"">
            <SplitterPane Size=""65"">Code</SplitterPane>
            <SplitterDivider />
            <SplitterPane Size=""35"">Output</SplitterPane>
        </Splitter>
    </SplitterPane>
</Splitter>";
}
