@page "/components/popover"

<PageTitle>Popover — Lumeo</PageTitle>

<PageHeader Title="Popover" Description="Displays rich content in a portal, triggered by a button." />

<Stack Gap="8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Popover>
            <PopoverTrigger>
                <Button Variant="Button.ButtonVariant.Outline">Open Popover</Button>
            </PopoverTrigger>
            <PopoverContent>
                <Stack Gap="4">
                    <Stack Gap="2">
                        <Heading Level="4" Class="text-base font-medium leading-none">Dimensions</Heading>
                        <Lumeo.Text Size="sm" Color="muted">Set the dimensions for the layer.</Lumeo.Text>
                    </Stack>
                    <Grid Columns="3" Gap="4" Class="items-center">
                        <Label>Width</Label>
                        <Input Class="col-span-2 h-8" Value="100%" />
                        <Label>Height</Label>
                        <Input Class="col-span-2 h-8" Value="25px" />
                    </Grid>
                </Stack>
            </PopoverContent>
        </Popover>
    </ComponentDemo>

    <ComponentDemo Title="Alignment" Code="@_alignCode">
        <Flex Gap="4">
            <Popover>
                <PopoverTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">Start</Button>
                </PopoverTrigger>
                <PopoverContent Align="PopoverContent.PopoverAlign.Start">
                    <Lumeo.Text Size="sm">This popover is aligned to the start.</Lumeo.Text>
                </PopoverContent>
            </Popover>
            <Popover>
                <PopoverTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">Center</Button>
                </PopoverTrigger>
                <PopoverContent Align="PopoverContent.PopoverAlign.Center">
                    <Lumeo.Text Size="sm">This popover is centered.</Lumeo.Text>
                </PopoverContent>
            </Popover>
            <Popover>
                <PopoverTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">End</Button>
                </PopoverTrigger>
                <PopoverContent Align="PopoverContent.PopoverAlign.End">
                    <Lumeo.Text Size="sm">This popover is aligned to the end.</Lumeo.Text>
                </PopoverContent>
            </Popover>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="With Arrow" Code="@_arrowCode">
        <Flex Gap="4" Wrap="true" Align="center" Justify="center" Class="py-8">
            <Popover>
                <PopoverTrigger><Button Variant="Button.ButtonVariant.Outline">Top</Button></PopoverTrigger>
                <PopoverContent Side="PopoverContent.PopoverSide.Top" ShowArrow="true">
                    <Lumeo.Text Size="sm">Popover on top with an arrow pointing at the trigger.</Lumeo.Text>
                </PopoverContent>
            </Popover>
            <Popover>
                <PopoverTrigger><Button Variant="Button.ButtonVariant.Outline">Bottom</Button></PopoverTrigger>
                <PopoverContent Side="PopoverContent.PopoverSide.Bottom" ShowArrow="true">
                    <Lumeo.Text Size="sm">Popover on bottom with an arrow pointing at the trigger.</Lumeo.Text>
                </PopoverContent>
            </Popover>
            <Popover>
                <PopoverTrigger><Button Variant="Button.ButtonVariant.Outline">Left</Button></PopoverTrigger>
                <PopoverContent Side="PopoverContent.PopoverSide.Left" ShowArrow="true">
                    <Lumeo.Text Size="sm">Popover on left with an arrow.</Lumeo.Text>
                </PopoverContent>
            </Popover>
            <Popover>
                <PopoverTrigger><Button Variant="Button.ButtonVariant.Outline">Right</Button></PopoverTrigger>
                <PopoverContent Side="PopoverContent.PopoverSide.Right" ShowArrow="true">
                    <Lumeo.Text Size="sm">Popover on right with an arrow.</Lumeo.Text>
                </PopoverContent>
            </Popover>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Placement" Code="@_placementCode">
        <Flex Gap="4" Wrap="true" Align="center" Justify="center" Class="py-8">
            <Popover>
                <PopoverTrigger><Button Variant="Button.ButtonVariant.Outline">Top</Button></PopoverTrigger>
                <PopoverContent Side="PopoverContent.PopoverSide.Top">
                    <Lumeo.Text Size="sm">Popover on top</Lumeo.Text>
                </PopoverContent>
            </Popover>
            <Popover>
                <PopoverTrigger><Button Variant="Button.ButtonVariant.Outline">Bottom</Button></PopoverTrigger>
                <PopoverContent Side="PopoverContent.PopoverSide.Bottom">
                    <Lumeo.Text Size="sm">Popover on bottom</Lumeo.Text>
                </PopoverContent>
            </Popover>
            <Popover>
                <PopoverTrigger><Button Variant="Button.ButtonVariant.Outline">Left</Button></PopoverTrigger>
                <PopoverContent Side="PopoverContent.PopoverSide.Left">
                    <Lumeo.Text Size="sm">Popover on left</Lumeo.Text>
                </PopoverContent>
            </Popover>
            <Popover>
                <PopoverTrigger><Button Variant="Button.ButtonVariant.Outline">Right</Button></PopoverTrigger>
                <PopoverContent Side="PopoverContent.PopoverSide.Right">
                    <Lumeo.Text Size="sm">Popover on right</Lumeo.Text>
                </PopoverContent>
            </Popover>
        </Flex>
    </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="_popoverSideSel" Options="_popoverSideOptions" />
            <Flex Align="center" Justify="center" Class="py-8">
                <Popover>
                    <PopoverTrigger>
                        <Button Variant="Button.ButtonVariant.Outline">Open (@_popoverSideSel)</Button>
                    </PopoverTrigger>
                    <PopoverContent Side="@_activePopoverSide">
                        <Lumeo.Text Size="sm">Popover appears on the <strong>@_popoverSideSel</strong>.</Lumeo.Text>
                    </PopoverContent>
                </Popover>
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Align — interactive" Code="@_alignInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a value to see it applied live.</Lumeo.Text>
            <Segmented @bind-Value="_popoverAlignSel" Options="_popoverAlignOptions" />
            <Flex Align="center" Justify="center" Class="py-8">
                <Popover>
                    <PopoverTrigger>
                        <Button Variant="Button.ButtonVariant.Outline">Open (@_popoverAlignSel)</Button>
                    </PopoverTrigger>
                    <PopoverContent Align="@_activePopoverAlign">
                        <Lumeo.Text Size="sm">Align = <strong>@_popoverAlignSel</strong>.</Lumeo.Text>
                    </PopoverContent>
                </Popover>
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="With Form" Code="@_formCode">
        <Popover>
            <PopoverTrigger>
                <Button>Update Settings</Button>
            </PopoverTrigger>
            <PopoverContent>
                <Stack Gap="4">
                    <Heading Level="4" Class="text-base font-medium leading-none">Settings</Heading>
                    <Grid Columns="3" Gap="4" Class="items-center">
                        <Label>Name</Label>
                        <Input Class="col-span-2 h-8" Value="My Project" />
                        <Label>Status</Label>
                        <Input Class="col-span-2 h-8" Value="Active" />
                    </Grid>
                    <Button Size="Button.ButtonSize.Sm">Save</Button>
                </Stack>
            </PopoverContent>
        </Popover>
    </ComponentDemo>
</Stack>

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

    <Stack Gap="8">
        <Stack>
            <Heading Level="3" Class="mb-3">Popover</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 popover 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">Obsolete alias for <code>Open</code>; will be removed in a future release.</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">Obsolete alias for <code>OpenChanged</code>; will be removed in a future release.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">PopoverContent</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">Side</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">PopoverSide</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Bottom</td>
                            <td class="p-3 text-muted-foreground">Which side of the trigger the popover appears on. Values: Top, Bottom, Left, Right.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Align</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">PopoverAlign</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Center</td>
                            <td class="p-3 text-muted-foreground">Horizontal alignment of the popover relative to its trigger. Values: Start, Center, End.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowArrow</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">Renders a small arrow pointing back at the trigger.</td>
                        </tr>
</tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    // Interactive: Side
    private string _popoverSideSel = "Bottom";
    private PopoverContent.PopoverSide _activePopoverSide => Enum.Parse<PopoverContent.PopoverSide>(_popoverSideSel);
    private List<Segmented.SegmentedOption> _popoverSideOptions = 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=""_sideSel"" Options=""_sideOptions"" />
<Popover>
    <PopoverTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Open (@_sideSel)</Button>
    </PopoverTrigger>
    <PopoverContent Side=""@_activePopoverSide"">
        <Lumeo.Text Size=""sm"">Popover appears on the @_sideSel.</Lumeo.Text>
    </PopoverContent>
</Popover>

@code {
    private string _sideSel = ""Bottom"";
    private PopoverContent.PopoverSide _activePopoverSide =>
        Enum.Parse<PopoverContent.PopoverSide>(_sideSel);
    private List<Segmented.SegmentedOption> _sideOptions = new()
    {
        new() { Label = ""Top"", Value = ""Top"" },
        new() { Label = ""Right"", Value = ""Right"" },
        new() { Label = ""Bottom"", Value = ""Bottom"" },
        new() { Label = ""Left"", Value = ""Left"" },
    };
}";

    // Interactive: Align
    private string _popoverAlignSel = "Center";
    private PopoverContent.PopoverAlign _activePopoverAlign => Enum.Parse<PopoverContent.PopoverAlign>(_popoverAlignSel);
    private List<Segmented.SegmentedOption> _popoverAlignOptions = new()
    {
        new() { Label = "Start", Value = "Start" },
        new() { Label = "Center", Value = "Center" },
        new() { Label = "End", Value = "End" },
    };
    private string _alignInteractiveCode = @"<Segmented @bind-Value=""_alignSel"" Options=""_alignOptions"" />
<Popover>
    <PopoverTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Open (@_alignSel)</Button>
    </PopoverTrigger>
    <PopoverContent Align=""@_activePopoverAlign"">
        <Lumeo.Text Size=""sm"">Align = @_alignSel.</Lumeo.Text>
    </PopoverContent>
</Popover>

@code {
    private string _alignSel = ""Center"";
    private PopoverContent.PopoverAlign _activePopoverAlign =>
        Enum.Parse<PopoverContent.PopoverAlign>(_alignSel);
    private List<Segmented.SegmentedOption> _alignOptions = new()
    {
        new() { Label = ""Start"", Value = ""Start"" },
        new() { Label = ""Center"", Value = ""Center"" },
        new() { Label = ""End"", Value = ""End"" },
    };
}";

    private string _arrowCode = @"<Popover>
    <PopoverTrigger><Button Variant=""Button.ButtonVariant.Outline"">Top</Button></PopoverTrigger>
    <PopoverContent Side=""PopoverContent.PopoverSide.Top"" ShowArrow=""true"">
        <Lumeo.Text Size=""sm"">Popover on top with an arrow pointing at the trigger.</Lumeo.Text>
    </PopoverContent>
</Popover>";

    private string _placementCode = @"<Popover>
    <PopoverTrigger><Button Variant=""Button.ButtonVariant.Outline"">Top</Button></PopoverTrigger>
    <PopoverContent Side=""PopoverContent.PopoverSide.Top"">
        <Lumeo.Text Size=""sm"">Popover on top</Lumeo.Text>
    </PopoverContent>
</Popover>
<Popover>
    <PopoverTrigger><Button Variant=""Button.ButtonVariant.Outline"">Bottom</Button></PopoverTrigger>
    <PopoverContent Side=""PopoverContent.PopoverSide.Bottom"">
        <Lumeo.Text Size=""sm"">Popover on bottom</Lumeo.Text>
    </PopoverContent>
</Popover>
<Popover>
    <PopoverTrigger><Button Variant=""Button.ButtonVariant.Outline"">Left</Button></PopoverTrigger>
    <PopoverContent Side=""PopoverContent.PopoverSide.Left"">
        <Lumeo.Text Size=""sm"">Popover on left</Lumeo.Text>
    </PopoverContent>
</Popover>
<Popover>
    <PopoverTrigger><Button Variant=""Button.ButtonVariant.Outline"">Right</Button></PopoverTrigger>
    <PopoverContent Side=""PopoverContent.PopoverSide.Right"">
        <Lumeo.Text Size=""sm"">Popover on right</Lumeo.Text>
    </PopoverContent>
</Popover>";

    private string _defaultCode = @"<Popover>
    <PopoverTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Open Popover</Button>
    </PopoverTrigger>
    <PopoverContent>
        <Stack Gap=""4"">
            <Stack Gap=""2"">
                <Heading Level=""4"" Class=""text-base font-medium leading-none"">Dimensions</Heading>
                <Lumeo.Text Size=""sm"" Color=""muted"">Set the dimensions for the layer.</Lumeo.Text>
            </Stack>
            <Grid Columns=""3"" Gap=""4"" Class=""items-center"">
                <Label>Width</Label>
                <Input Class=""col-span-2 h-8"" Value=""100%"" />
                <Label>Height</Label>
                <Input Class=""col-span-2 h-8"" Value=""25px"" />
            </Grid>
        </Stack>
    </PopoverContent>
</Popover>";

    private string _alignCode = @"<Popover>
    <PopoverTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Start</Button>
    </PopoverTrigger>
    <PopoverContent Align=""PopoverContent.PopoverAlign.Start"">
        <Lumeo.Text Size=""sm"">Aligned to start.</Lumeo.Text>
    </PopoverContent>
</Popover>

<Popover>
    <PopoverTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">End</Button>
    </PopoverTrigger>
    <PopoverContent Align=""PopoverContent.PopoverAlign.End"">
        <Lumeo.Text Size=""sm"">Aligned to end.</Lumeo.Text>
    </PopoverContent>
</Popover>";

    private string _formCode = @"<Popover>
    <PopoverTrigger>
        <Button>Update Settings</Button>
    </PopoverTrigger>
    <PopoverContent>
        <Stack Gap=""4"">
            <Heading Level=""4"" Class=""text-base font-medium leading-none"">Settings</Heading>
            <Grid Columns=""3"" Gap=""4"" Class=""items-center"">
                <Label>Name</Label>
                <Input Class=""col-span-2 h-8"" Value=""My Project"" />
            </Grid>
            <Button Size=""Button.ButtonSize.Sm"">Save</Button>
        </Stack>
    </PopoverContent>
</Popover>";
}
