@page "/components/drawer"

<PageTitle>Drawer — Lumeo</PageTitle>

<PageHeader Title="Drawer" Description="A panel that slides up from the bottom of the screen on mobile devices." />

<Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mb-6 mt-6">
    <ChildContent>
        <strong>Popovers inside Sheet/Drawer.</strong> The slide-in animation
        used to create a CSS containing-block trap that broke
        <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">position: fixed</code>
        popovers (Select, DatePicker, Combobox) inside Drawers. Fixed in rc.21
        — the slide keyframes now end at <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">transform: none</code>
        instead of identity-translate. If you still need predictability for older
        rc consumers, set <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">Animation="DrawerAnimation.Fade"</code>
        or <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">Animation="DrawerAnimation.None"</code>.
    </ChildContent>
</Alert>

<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>Present mobile-first overlays that slide up from the bottom of the screen</li>
        <li>Build bottom sheets for action selection, filters, or confirmations</li>
        <li>Show supplementary content without navigating away from the current page</li>
        <li>Provide a gesture-friendly overlay that supports swipe-to-dismiss</li>
        <li>Display quick-action menus on touch devices</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Drawer @bind-Open="_isOpen">
            <DrawerTrigger>
                <Button Variant="Button.ButtonVariant.Outline">Open Drawer</Button>
            </DrawerTrigger>
            <DrawerContent>
                <DrawerHeader>
                    <DrawerTitle>Move Goal</DrawerTitle>
                    <DrawerDescription>Set your daily activity goal.</DrawerDescription>
                </DrawerHeader>
                <Flex Align="center" Justify="center" Gap="4" Class="p-4 pb-0">
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Icon" OnClick="Decrease">
                        <DynamicIcon Name="Minus" Class="h-4 w-4" />
                    </Button>
                    <Stack Gap="0" Class="text-center">
                        <Lumeo.Text Size="5xl" Weight="bold" Class="tracking-tighter">@_goal</Lumeo.Text>
                        <Lumeo.Text Size="sm" Color="muted" Class="mt-1">calories/day</Lumeo.Text>
                    </Stack>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Icon" OnClick="Increase">
                        <DynamicIcon Name="Plus" Class="h-4 w-4" />
                    </Button>
                </Flex>
                <DrawerFooter>
                    <DrawerClose>
                        <Button Class="w-full">Submit</Button>
                    </DrawerClose>
                    <DrawerClose>
                        <Button Variant="Button.ButtonVariant.Outline" Class="w-full">Cancel</Button>
                    </DrawerClose>
                </DrawerFooter>
            </DrawerContent>
        </Drawer>
    </ComponentDemo>

    <ComponentDemo Title="Filters Drawer" Code="@_filtersCode">
        <Drawer @bind-Open="_isFiltersOpen">
            <DrawerTrigger>
                <Button Variant="Button.ButtonVariant.Outline">
                    <DynamicIcon Name="Settings" Class="h-4 w-4" /> Filters
                </Button>
            </DrawerTrigger>
            <DrawerContent>
                <DrawerHeader>
                    <DrawerTitle>Filter Results</DrawerTitle>
                    <DrawerDescription>Narrow down your search with these options.</DrawerDescription>
                </DrawerHeader>
                <Stack Gap="4" Class="p-4">
                    <Stack Gap="2">
                        <Label>Category</Label>
                        <Select @bind-Value="_filterCategory">
                            <SelectTrigger>
                                <Text As="span" Class="@(_filterCategory == null ? "text-muted-foreground" : "")">@(_filterCategory ?? "All categories")</Text>
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem Value="electronics">Electronics</SelectItem>
                                <SelectItem Value="clothing">Clothing</SelectItem>
                                <SelectItem Value="books">Books</SelectItem>
                                <SelectItem Value="home">Home & Garden</SelectItem>
                            </SelectContent>
                        </Select>
                    </Stack>
                    <Stack Gap="2">
                        <Label>Sort by</Label>
                        <RadioGroup @bind-Value="_filterSort">
                            <Flex Align="center" Gap="2">
                                <RadioGroupItem Value="popular" />
                                <Label>Most popular</Label>
                            </Flex>
                            <Flex Align="center" Gap="2">
                                <RadioGroupItem Value="newest" />
                                <Label>Newest first</Label>
                            </Flex>
                            <Flex Align="center" Gap="2">
                                <RadioGroupItem Value="price-asc" />
                                <Label>Price: low to high</Label>
                            </Flex>
                        </RadioGroup>
                    </Stack>
                </Stack>
                <DrawerFooter>
                    <DrawerClose>
                        <Button Class="w-full">Apply Filters</Button>
                    </DrawerClose>
                    <DrawerClose>
                        <Button Variant="Button.ButtonVariant.Outline" Class="w-full">Reset</Button>
                    </DrawerClose>
                </DrawerFooter>
            </DrawerContent>
        </Drawer>
    </ComponentDemo>

    <ComponentDemo Title="Prevent Close" Code="@_preventCloseCode">
        <Drawer @bind-Open="_preventDrawerOpen">
            <DrawerTrigger>
                <Button Variant="Button.ButtonVariant.Outline">Open Protected Drawer</Button>
            </DrawerTrigger>
            <DrawerContent PreventClose="true">
                <DrawerHeader>
                    <DrawerTitle>Confirm Action</DrawerTitle>
                    <DrawerDescription>You must choose an option to continue.</DrawerDescription>
                </DrawerHeader>
                <Stack Gap="2" Class="p-4">
                    <Button Class="w-full" OnClick="@(() => _preventDrawerOpen = false)">Confirm</Button>
                    <Button Variant="Button.ButtonVariant.Outline" Class="w-full" OnClick="@(() => _preventDrawerOpen = false)">Cancel</Button>
                </Stack>
            </DrawerContent>
        </Drawer>
    </ComponentDemo>

    <ComponentDemo Title="Side — interactive" Code="@_sideInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a value to see it applied live.</Lumeo.Text>
            <Segmented @bind-Value="_drawerSideSel" Options="_drawerSideOptions" />
            <div>
                <Drawer @bind-Open="_drawerSideInteractiveOpen">
                    <DrawerTrigger>
                        <Button Variant="Button.ButtonVariant.Outline">Open Drawer (@_drawerSideSel)</Button>
                    </DrawerTrigger>
                    <DrawerContent Side="@_activeDrawerSide">
                        <DrawerHeader>
                            <DrawerTitle>@_drawerSideSel Drawer</DrawerTitle>
                            <DrawerDescription>This drawer slides in from the @_drawerSideSel.ToLower().</DrawerDescription>
                        </DrawerHeader>
                        <DrawerFooter>
                            <DrawerClose>
                                <Button Class="w-full">Close</Button>
                            </DrawerClose>
                        </DrawerFooter>
                    </DrawerContent>
                </Drawer>
            </div>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Simple Drawer" Code="@_simpleCode">
        <Drawer @bind-Open="_isSimpleOpen">
            <DrawerTrigger>
                <Button>View Details</Button>
            </DrawerTrigger>
            <DrawerContent>
                <DrawerHeader>
                    <DrawerTitle>Order Details</DrawerTitle>
                    <DrawerDescription>Review your recent order information.</DrawerDescription>
                </DrawerHeader>
                <Stack Gap="2" Class="p-4">
                    <Flex Justify="between" Class="text-sm">
                        <Lumeo.Text As="span" Size="sm" Color="muted">Order ID</Lumeo.Text>
                        <Lumeo.Text As="span" Size="sm" Weight="medium">#12345</Lumeo.Text>
                    </Flex>
                    <Flex Justify="between" Class="text-sm">
                        <Lumeo.Text As="span" Size="sm" Color="muted">Status</Lumeo.Text>
                        <Lumeo.Text As="span" Size="sm" Weight="medium">Shipped</Lumeo.Text>
                    </Flex>
                    <Flex Justify="between" Class="text-sm">
                        <Lumeo.Text As="span" Size="sm" Color="muted">Total</Lumeo.Text>
                        <Lumeo.Text As="span" Size="sm" Weight="medium">$49.99</Lumeo.Text>
                    </Flex>
                </Stack>
                <DrawerFooter>
                    <DrawerClose>
                        <Button Class="w-full">Close</Button>
                    </DrawerClose>
                </DrawerFooter>
            </DrawerContent>
        </Drawer>
    </ComponentDemo>
</Stack>

<div class="mt-12">
    <Heading Id="keyboard-interactions" Level="2" Class="scroll-mt-20">Keyboard Interactions</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Key</TableHead>
                    <TableHead>Action</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell><Kbd>Escape</Kbd></TableCell><TableCell>Close the drawer (unless PreventClose is enabled)</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Tab</Kbd></TableCell><TableCell>Cycle focus through focusable elements within the drawer</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Shift + Tab</Kbd></TableCell><TableCell>Move focus to the previous focusable element within the drawer</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
    <Lumeo.Text Size="sm" Color="muted" Class="mt-2">On touch devices, swiping down on the drawer handle also dismisses it.</Lumeo.Text>
</div>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">Drawer</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">Open</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">Controls whether the drawer is open. Use with @@bind-Open for two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OpenChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;bool&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when the open state changes.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsOpen</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">Deprecated alias for <code>Open</code>. Prefer <code>Open</code> in new code.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsOpenChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;bool&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Deprecated alias for <code>OpenChanged</code>. Prefer <code>OpenChanged</code> in new code.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">DrawerContent</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">PreventClose</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">Prevents closing via swipe or backdrop click.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary italic text-muted-foreground" colspan="4">The panel that slides up from the bottom of the screen. Includes focus trap, scroll lock, and swipe-to-dismiss gesture. Sub-components DrawerTrigger, DrawerClose, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription mirror the Dialog/Sheet API.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">Side</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">DrawerSide</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Bottom</td>
                            <td class="p-3 text-muted-foreground">Side the drawer slides in from. Values: Top, Right, Bottom, Left.</td>
                        </tr>
</tbody>
                </table>
            </Stack>
        </Stack>
    </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/sheet" class="text-primary hover:underline">Sheet</a> — Use for side-panel overlays on desktop; Drawer is optimized for bottom-sheet mobile interactions</li>
        <li><a href="/components/dialog" class="text-primary hover:underline">Dialog</a> — Use for centered modal overlays that require explicit user decisions</li>
        <li><a href="/components/popover" class="text-primary hover:underline">Popover</a> — Use for small contextual overlays anchored to a trigger element</li>
    </ul>
</div>

@code {
    private bool _isOpen;
    private bool _isSimpleOpen;
    private bool _isFiltersOpen;
    private bool _preventDrawerOpen;
    private bool _drawerSideInteractiveOpen;

    // Interactive: Side
    private string _drawerSideSel = "Bottom";
    private DrawerContent.DrawerSide _activeDrawerSide => Enum.Parse<DrawerContent.DrawerSide>(_drawerSideSel);
    private List<Segmented.SegmentedOption> _drawerSideOptions = new()
    {
        new() { Label = "Top", Value = "Top" },
        new() { Label = "Right", Value = "Right" },
        new() { Label = "Bottom", Value = "Bottom" },
        new() { Label = "Left", Value = "Left" },
    };
    private string _sideInteractiveCode = @"<Segmented @bind-Value=""_drawerSideSel"" Options=""_drawerSideOptions"" />
<Drawer @bind-Open=""_open"">
    <DrawerTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Open Drawer (@_drawerSideSel)</Button>
    </DrawerTrigger>
    <DrawerContent Side=""@_activeDrawerSide"">
        <DrawerHeader>
            <DrawerTitle>@_drawerSideSel Drawer</DrawerTitle>
            <DrawerDescription>Slides in from the @_drawerSideSel.ToLower().</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
            <DrawerClose><Button Class=""w-full"">Close</Button></DrawerClose>
        </DrawerFooter>
    </DrawerContent>
</Drawer>

@code {
    private string _drawerSideSel = ""Bottom"";
    private DrawerContent.DrawerSide _activeDrawerSide => Enum.Parse<DrawerContent.DrawerSide>(_drawerSideSel);
    private List<Segmented.SegmentedOption> _drawerSideOptions = new()
    {
        new() { Label = ""Top"", Value = ""Top"" },
        new() { Label = ""Right"", Value = ""Right"" },
        new() { Label = ""Bottom"", Value = ""Bottom"" },
        new() { Label = ""Left"", Value = ""Left"" },
    };
}";
    private string? _filterCategory;
    private string? _filterSort = "popular";
    private int _goal = 350;

    private void Increase() => _goal = Math.Min(1000, _goal + 10);
    private void Decrease() => _goal = Math.Max(100, _goal - 10);

    private string _preventCloseCode = @"<Drawer @bind-Open=""_preventDrawerOpen"">
    <DrawerTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Open Protected Drawer</Button>
    </DrawerTrigger>
    <DrawerContent PreventClose=""true"">
        <DrawerHeader>
            <DrawerTitle>Confirm Action</DrawerTitle>
            <DrawerDescription>You must choose an option to continue.</DrawerDescription>
        </DrawerHeader>
        <Stack Gap=""2"" Class=""p-4"">
            <Button Class=""w-full"" OnClick=""@(() => _preventDrawerOpen = false)"">Confirm</Button>
            <Button Variant=""Button.ButtonVariant.Outline"" Class=""w-full"" OnClick=""@(() => _preventDrawerOpen = false)"">Cancel</Button>
        </Stack>
    </DrawerContent>
</Drawer>

@code {
    private bool _preventDrawerOpen;
}";

    private string _defaultCode = @"<Drawer @bind-Open=""_isOpen"">
    <DrawerTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Open Drawer</Button>
    </DrawerTrigger>
    <DrawerContent>
        <DrawerHeader>
            <DrawerTitle>Move Goal</DrawerTitle>
            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
        </DrawerHeader>
        <Stack Gap=""0"" Class=""p-4 text-center"">
            <Lumeo.Text Size=""5xl"" Weight=""bold"">@_goal</Lumeo.Text>
            <Lumeo.Text Size=""sm"" Color=""muted"">calories/day</Lumeo.Text>
        </Stack>
        <DrawerFooter>
            <DrawerClose>
                <Button Class=""w-full"">Submit</Button>
            </DrawerClose>
            <DrawerClose>
                <Button Variant=""Button.ButtonVariant.Outline"" Class=""w-full"">Cancel</Button>
            </DrawerClose>
        </DrawerFooter>
    </DrawerContent>
</Drawer>

@code {
    private bool _isOpen;
    private int _goal = 350;
}";

    private string _filtersCode = @"<Drawer @bind-Open=""_isFiltersOpen"">
    <DrawerTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">
            <Blazicon Svg=""Lucide.Settings"" class=""h-4 w-4"" /> Filters
        </Button>
    </DrawerTrigger>
    <DrawerContent>
        <DrawerHeader>
            <DrawerTitle>Filter Results</DrawerTitle>
            <DrawerDescription>Narrow down your search.</DrawerDescription>
        </DrawerHeader>
        <Stack Gap=""4"" Class=""p-4"">
            <Select @bind-Value=""_filterCategory"">
                <SelectTrigger><span>@(_filterCategory ?? ""All categories"")</span></SelectTrigger>
                <SelectContent>
                    <SelectItem Value=""electronics"">Electronics</SelectItem>
                    <SelectItem Value=""clothing"">Clothing</SelectItem>
                </SelectContent>
            </Select>
        </Stack>
        <DrawerFooter>
            <DrawerClose><Button Class=""w-full"">Apply Filters</Button></DrawerClose>
        </DrawerFooter>
    </DrawerContent>
</Drawer>";

    private string _simpleCode = @"<Drawer @bind-Open=""_isOpen"">
    <DrawerTrigger>
        <Button>View Details</Button>
    </DrawerTrigger>
    <DrawerContent>
        <DrawerHeader>
            <DrawerTitle>Order Details</DrawerTitle>
            <DrawerDescription>Review your recent order information.</DrawerDescription>
        </DrawerHeader>
        <Stack Gap=""2"" Class=""p-4"">
            <Flex Justify=""between"" Class=""text-sm"">
                <Lumeo.Text As=""span"" Size=""sm"" Color=""muted"">Order ID</Lumeo.Text>
                <Lumeo.Text As=""span"" Size=""sm"" Weight=""medium"">#12345</Lumeo.Text>
            </Flex>
        </Stack>
        <DrawerFooter>
            <DrawerClose>
                <Button Class=""w-full"">Close</Button>
            </DrawerClose>
        </DrawerFooter>
    </DrawerContent>
</Drawer>

@code {
    private bool _isOpen;
}";
}
