@page "/components/resizable"

<PageTitle>Resizable — Lumeo</PageTitle>

<PageHeader Title="Resizable" Description="Accessible resizable panel groups and layouts with drag-to-resize handles." />

<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>Split pane layouts such as a sidebar + content area</li>
        <li>Adjustable layouts where users control how much space each section occupies</li>
        <li>IDE-like or editor panels with resizable code, preview, and console areas</li>
        <li>Dashboards where users want to resize widgets or data panels</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Horizontal" Code="@_horizontalCode">
        <Stack Class="w-full max-w-lg">
            <ResizablePanelGroup Direction="ResizablePanelGroup.ResizableDirection.Horizontal" DefaultSizes="@(new double[] { 50, 50 })" Class="min-h-[200px] rounded-lg border">
                <ResizablePanel Order="0">
                    <Flex Class="h-full items-center justify-center p-6">
                        <Lumeo.Text As="span" Class="font-semibold">Panel One</Lumeo.Text>
                    </Flex>
                </ResizablePanel>
                <ResizableHandle PanelIndex="0" WithHandle="true" />
                <ResizablePanel Order="1">
                    <Flex Class="h-full items-center justify-center p-6">
                        <Lumeo.Text As="span" Class="font-semibold">Panel Two</Lumeo.Text>
                    </Flex>
                </ResizablePanel>
            </ResizablePanelGroup>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Vertical" Code="@_verticalCode">
        <Stack Class="w-full max-w-lg">
            <ResizablePanelGroup Direction="ResizablePanelGroup.ResizableDirection.Vertical" DefaultSizes="@(new double[] { 40, 60 })" Class="min-h-[300px] rounded-lg border">
                <ResizablePanel Order="0">
                    <Flex Class="h-full items-center justify-center p-6">
                        <Lumeo.Text As="span" Class="font-semibold">Top</Lumeo.Text>
                    </Flex>
                </ResizablePanel>
                <ResizableHandle PanelIndex="0" WithHandle="true" />
                <ResizablePanel Order="1">
                    <Flex Class="h-full items-center justify-center p-6">
                        <Lumeo.Text As="span" Class="font-semibold">Bottom</Lumeo.Text>
                    </Flex>
                </ResizablePanel>
            </ResizablePanelGroup>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Three Panels" Code="@_threeCode">
        <Stack Class="w-full max-w-lg">
            <ResizablePanelGroup Direction="ResizablePanelGroup.ResizableDirection.Horizontal" DefaultSizes="@(new double[] { 25, 50, 25 })" Class="min-h-[200px] rounded-lg border">
                <ResizablePanel Order="0">
                    <Flex Class="h-full items-center justify-center p-6">
                        <Lumeo.Text As="span" Class="font-semibold">Sidebar</Lumeo.Text>
                    </Flex>
                </ResizablePanel>
                <ResizableHandle PanelIndex="0" WithHandle="true" />
                <ResizablePanel Order="1">
                    <Flex Class="h-full items-center justify-center p-6">
                        <Lumeo.Text As="span" Class="font-semibold">Content</Lumeo.Text>
                    </Flex>
                </ResizablePanel>
                <ResizableHandle PanelIndex="1" WithHandle="true" />
                <ResizablePanel Order="2">
                    <Flex Class="h-full items-center justify-center p-6">
                        <Lumeo.Text As="span" Class="font-semibold">Panel</Lumeo.Text>
                    </Flex>
                </ResizablePanel>
            </ResizablePanelGroup>
        </Stack>
    </ComponentDemo>
</Stack>

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

    <Heading Id="resizablepanelgroup" Level="3" Class="mt-8 scroll-mt-20">ResizablePanelGroup</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 panels and handles content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Direction</TableCell><TableCell Class="font-mono text-xs">ResizableDirection</TableCell><TableCell Class="font-mono text-xs">Horizontal</TableCell><TableCell>Layout direction. Values: Horizontal, Vertical.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">DefaultSizes</TableCell><TableCell Class="font-mono text-xs">double[]?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Initial size percentages for each panel (e.g. [50, 50]).</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="resizablepanel" Level="3" Class="mt-8 scroll-mt-20">ResizablePanel</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 panel content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Order</TableCell><TableCell Class="font-mono text-xs">int</TableCell><TableCell Class="font-mono text-xs">0</TableCell><TableCell>Zero-based index of the panel within the group.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">DefaultSize</TableCell><TableCell Class="font-mono text-xs">double</TableCell><TableCell Class="font-mono text-xs">50</TableCell><TableCell>Default size as a percentage of the group.</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">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="resizablehandle" Level="3" Class="mt-8 scroll-mt-20">ResizableHandle</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">PanelIndex</TableCell><TableCell Class="font-mono text-xs">int</TableCell><TableCell Class="font-mono text-xs">-</TableCell><TableCell>Index of the panel to the left/above this handle. Required.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">WithHandle</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Shows a visible grip icon on the handle.</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/scroll-area" class="text-primary hover:underline">ScrollArea</a> — Styled scrollable container for overflowing panel content</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — Contained content sections that can live inside resizable panels</li>
        <li><a href="/components/sidebar" class="text-primary hover:underline">Sidebar</a> — Collapsible navigation sidebar for app-level layouts</li>
    </ul>
</div>

@code {
    private string _horizontalCode = @"<ResizablePanelGroup Direction=""ResizablePanelGroup.ResizableDirection.Horizontal""
                       DefaultSizes=""@(new double[] { 50, 50 })"" Class=""min-h-[200px] rounded-lg border"">
    <ResizablePanel Order=""0"">
        <div class=""flex h-full items-center justify-center p-6"">
            <span class=""font-semibold"">Panel One</span>
        </div>
    </ResizablePanel>
    <ResizableHandle PanelIndex=""0"" WithHandle=""true"" />
    <ResizablePanel Order=""1"">
        <div class=""flex h-full items-center justify-center p-6"">
            <span class=""font-semibold"">Panel Two</span>
        </div>
    </ResizablePanel>
</ResizablePanelGroup>";

    private string _verticalCode = @"<ResizablePanelGroup Direction=""ResizablePanelGroup.ResizableDirection.Vertical""
                       DefaultSizes=""@(new double[] { 40, 60 })"" Class=""min-h-[300px] rounded-lg border"">
    <ResizablePanel Order=""0"">
        <div class=""flex h-full items-center justify-center p-6"">
            <span class=""font-semibold"">Top</span>
        </div>
    </ResizablePanel>
    <ResizableHandle PanelIndex=""0"" WithHandle=""true"" />
    <ResizablePanel Order=""1"">
        <div class=""flex h-full items-center justify-center p-6"">
            <span class=""font-semibold"">Bottom</span>
        </div>
    </ResizablePanel>
</ResizablePanelGroup>";

    private string _threeCode = @"<ResizablePanelGroup Direction=""ResizablePanelGroup.ResizableDirection.Horizontal""
                       DefaultSizes=""@(new double[] { 25, 50, 25 })"" Class=""min-h-[200px] rounded-lg border"">
    <ResizablePanel Order=""0"">
        <div class=""flex h-full items-center justify-center p-6"">
            <span class=""font-semibold"">Sidebar</span>
        </div>
    </ResizablePanel>
    <ResizableHandle PanelIndex=""0"" WithHandle=""true"" />
    <ResizablePanel Order=""1"">
        <div class=""flex h-full items-center justify-center p-6"">
            <span class=""font-semibold"">Content</span>
        </div>
    </ResizablePanel>
    <ResizableHandle PanelIndex=""1"" WithHandle=""true"" />
    <ResizablePanel Order=""2"">
        <div class=""flex h-full items-center justify-center p-6"">
            <span class=""font-semibold"">Panel</span>
        </div>
    </ResizablePanel>
</ResizablePanelGroup>";
}
