@page "/components/collapsible"

<PageTitle>Collapsible — Lumeo</PageTitle>

<PageHeader Title="Collapsible" Description="An interactive component that expands and collapses content." />

<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>Showing and hiding optional content such as advanced settings or extra details</li>
        <li>Expandable sidebar sections for navigation grouping</li>
        <li>Spoiler text or progressive disclosure where content is hidden by default</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Container MaxWidth="sm" Center="false">
            <Collapsible @bind-Open="_isOpen1">
                <Flex Align="center" Justify="between" Class="px-4">
                    <Heading Level="4" Size="sm" Weight="semibold">Starred Repositories</Heading>
                    <CollapsibleTrigger>
                        <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                            <DynamicIcon Name="ChevronDown" Class="h-4 w-4" />
                        </Button>
                    </CollapsibleTrigger>
                </Flex>
                <Stack Class="rounded-md border bg-card px-4 py-2 text-sm text-foreground mt-2">
                    @("@")shadcn/ui
                </Stack>
                <CollapsibleContent>
                    <Stack Gap="2" Class="mt-2">
                        <Stack Class="rounded-md border bg-card px-4 py-2 text-sm text-foreground">
                            @("@")radix-ui/primitives
                        </Stack>
                        <Stack Class="rounded-md border bg-card px-4 py-2 text-sm text-foreground">
                            @("@")tailwindcss/typography
                        </Stack>
                    </Stack>
                </CollapsibleContent>
            </Collapsible>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Initially Open" Code="@_openCode">
        <Container MaxWidth="sm" Center="false">
            <Collapsible @bind-Open="_isOpen2">
                <CollapsibleTrigger>
                    <Flex Class="items-center gap-2 cursor-pointer">
                        <DynamicIcon Name="ChevronRight" Class="@($"h-4 w-4 transition-transform {(_isOpen2 ? "rotate-90" : "")}")" />
                        <Lumeo.Text As="span" Class="text-sm font-medium text-foreground">More info</Lumeo.Text>
                    </Flex>
                </CollapsibleTrigger>
                <CollapsibleContent>
                    <Lumeo.Text Size="sm" Color="muted" Class="mt-2 pl-6">
                        This section was initially expanded and can be toggled open and closed.
                    </Lumeo.Text>
                </CollapsibleContent>
            </Collapsible>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Sidebar Section" Code="@_sidebarCode">
        <Container MaxWidth="xs" Center="false" Class="border rounded-lg" Padding="2">
            <Collapsible @bind-Open="_isOpen3">
                <CollapsibleTrigger>
                    <Flex Align="center" Justify="between" Class="w-full px-2 py-1.5 rounded-md hover:bg-accent cursor-pointer">
                        <Flex Align="center" Gap="2">
                            <DynamicIcon Name="Settings" Class="h-4 w-4" />
                            <Lumeo.Text As="span" Size="sm" Weight="medium">Settings</Lumeo.Text>
                        </Flex>
                        <DynamicIcon Name="ChevronDown" Class="@($"h-4 w-4 text-muted-foreground transition-transform {(_isOpen3 ? "rotate-180" : "")}")" />
                    </Flex>
                </CollapsibleTrigger>
                <CollapsibleContent>
                    <Stack Gap="1" Class="pl-6 mt-1">
                        <Stack Class="px-2 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md cursor-pointer">General</Stack>
                        <Stack Class="px-2 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md cursor-pointer">Security</Stack>
                        <Stack Class="px-2 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md cursor-pointer">Notifications</Stack>
                    </Stack>
                </CollapsibleContent>
            </Collapsible>
        </Container>
    </ComponentDemo>
</Stack>

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

    <Heading Id="collapsible" Level="3" Class="mt-8 scroll-mt-20">Collapsible</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>Content including trigger and collapsible content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Open</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Controls whether the content is visible. Use with @@bind-Open.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">OpenChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;bool&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when the open state changes.</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>
                <TableRow><TableCell Class="font-mono text-xs">IsOpen</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">&gt; Open</TableCell><TableCell>Obsolete alias for Open; will be removed in a future release.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">IsOpenChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;bool&gt;</TableCell><TableCell Class="font-mono text-xs">&gt; OpenChanged</TableCell><TableCell>Obsolete alias for OpenChanged; will be removed in a future release.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="collapsibletrigger" Level="3" Class="mt-8 scroll-mt-20">CollapsibleTrigger</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>Clickable trigger 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="collapsiblecontent" Level="3" Class="mt-8 scroll-mt-20">CollapsibleContent</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>Content shown when the collapsible is open.</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/accordion" class="text-primary hover:underline">Accordion</a> — For multiple collapsible sections where only one (or a few) can be open at a time</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — For grouping related content in a visual container</li>
        <li><a href="/components/dialog" class="text-primary hover:underline">Dialog</a> — For showing content in a modal overlay instead of inline expansion</li>
    </ul>
</div>

@code {
    private bool _isOpen1;
    private bool _isOpen2 = true;
    private bool _isOpen3 = true;

    private string _defaultCode = @"<Collapsible @bind-Open=""_isOpen"">
    <div class=""flex items-center justify-between"">
        <h4 class=""text-sm font-semibold"">Starred Repositories</h4>
        <CollapsibleTrigger>
            <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">
                <Blazicon Svg=""Lucide.ChevronDown"" class=""h-4 w-4"" />
            </Button>
        </CollapsibleTrigger>
    </div>
    <CollapsibleContent>
        <div class=""rounded-md border px-4 py-2 text-sm"">Content here</div>
    </CollapsibleContent>
</Collapsible>";

    private string _sidebarCode = @"<Collapsible @bind-Open=""_isOpen"">
    <CollapsibleTrigger>
        <div class=""flex items-center justify-between px-2 py-1.5 rounded-md hover:bg-accent cursor-pointer"">
            <div class=""flex items-center gap-2 text-sm font-medium"">
                <Blazicon Svg=""Lucide.Settings"" class=""h-4 w-4"" /> Settings
            </div>
            <Blazicon Svg=""Lucide.ChevronDown"" class=""@($""h-4 w-4 transition-transform {(_isOpen ? \""rotate-180\"" : \""\"")}"")}"" />
        </div>
    </CollapsibleTrigger>
    <CollapsibleContent>
        <div class=""pl-6 mt-1 space-y-1"">
            <div class=""px-2 py-1.5 text-sm text-muted-foreground"">General</div>
            <div class=""px-2 py-1.5 text-sm text-muted-foreground"">Security</div>
            <div class=""px-2 py-1.5 text-sm text-muted-foreground"">Notifications</div>
        </div>
    </CollapsibleContent>
</Collapsible>";

    private string _openCode = @"<Collapsible @bind-Open=""_isOpen"">
    <CollapsibleTrigger>
        <span class=""text-sm font-medium"">More info</span>
    </CollapsibleTrigger>
    <CollapsibleContent>
        <p class=""mt-2 text-sm text-muted-foreground"">Expandable content.</p>
    </CollapsibleContent>
</Collapsible>";
}
