@page "/components/tooltip"

<PageTitle>Tooltip — Lumeo</PageTitle>

<PageHeader Title="Tooltip" Description="A popup that displays information related to an element when the element receives hover focus." />

<Stack Gap="8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Tooltip>
            <TooltipTrigger>
                <Button Variant="Button.ButtonVariant.Outline">Hover me</Button>
            </TooltipTrigger>
            <TooltipContent>
                <Lumeo.Text>Add to library</Lumeo.Text>
            </TooltipContent>
        </Tooltip>
    </ComponentDemo>

    <ComponentDemo Title="Side Variations" Code="@_sideCode">
        <Flex Gap="4">
            <Tooltip>
                <TooltipTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">Top</Button>
                </TooltipTrigger>
                <TooltipContent Side="TooltipContent.TooltipSide.Top">
                    <Lumeo.Text>Tooltip on top</Lumeo.Text>
                </TooltipContent>
            </Tooltip>
            <Tooltip>
                <TooltipTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">Right</Button>
                </TooltipTrigger>
                <TooltipContent Side="TooltipContent.TooltipSide.Right">
                    <Lumeo.Text>Tooltip on right</Lumeo.Text>
                </TooltipContent>
            </Tooltip>
            <Tooltip>
                <TooltipTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">Bottom</Button>
                </TooltipTrigger>
                <TooltipContent Side="TooltipContent.TooltipSide.Bottom">
                    <Lumeo.Text>Tooltip on bottom</Lumeo.Text>
                </TooltipContent>
            </Tooltip>
            <Tooltip>
                <TooltipTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">Left</Button>
                </TooltipTrigger>
                <TooltipContent Side="TooltipContent.TooltipSide.Left">
                    <Lumeo.Text>Tooltip on left</Lumeo.Text>
                </TooltipContent>
            </Tooltip>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="With Icons" Code="@_iconCode">
        <Flex Gap="4">
            <Tooltip>
                <TooltipTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Icon">
                        <DynamicIcon Name="Bold" Class="h-4 w-4" />
                    </Button>
                </TooltipTrigger>
                <TooltipContent>
                    <Lumeo.Text>Bold</Lumeo.Text>
                </TooltipContent>
            </Tooltip>
            <Tooltip>
                <TooltipTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Icon">
                        <DynamicIcon Name="Italic" Class="h-4 w-4" />
                    </Button>
                </TooltipTrigger>
                <TooltipContent>
                    <Lumeo.Text>Italic</Lumeo.Text>
                </TooltipContent>
            </Tooltip>
            <Tooltip>
                <TooltipTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Icon">
                        <DynamicIcon Name="Underline" Class="h-4 w-4" />
                    </Button>
                </TooltipTrigger>
                <TooltipContent>
                    <Lumeo.Text>Underline</Lumeo.Text>
                </TooltipContent>
            </Tooltip>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Placement" Code="@_placementCode">
        <Flex Gap="4" Wrap="true" Align="center" Justify="center" Class="py-8">
            <Tooltip>
                <TooltipTrigger><Button Variant="Button.ButtonVariant.Outline">Top</Button></TooltipTrigger>
                <TooltipContent Side="TooltipContent.TooltipSide.Top">Top tooltip</TooltipContent>
            </Tooltip>
            <Tooltip>
                <TooltipTrigger><Button Variant="Button.ButtonVariant.Outline">Bottom</Button></TooltipTrigger>
                <TooltipContent Side="TooltipContent.TooltipSide.Bottom">Bottom tooltip</TooltipContent>
            </Tooltip>
            <Tooltip>
                <TooltipTrigger><Button Variant="Button.ButtonVariant.Outline">Left</Button></TooltipTrigger>
                <TooltipContent Side="TooltipContent.TooltipSide.Left">Left tooltip</TooltipContent>
            </Tooltip>
            <Tooltip>
                <TooltipTrigger><Button Variant="Button.ButtonVariant.Outline">Right</Button></TooltipTrigger>
                <TooltipContent Side="TooltipContent.TooltipSide.Right">Right tooltip</TooltipContent>
            </Tooltip>
        </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. Hover the button to see the tooltip appear on the selected side.</Lumeo.Text>
            <Segmented @bind-Value="_tooltipSideSel">
                <SegmentedItem Value="Top">Top</SegmentedItem>
                <SegmentedItem Value="Right">Right</SegmentedItem>
                <SegmentedItem Value="Bottom">Bottom</SegmentedItem>
                <SegmentedItem Value="Left">Left</SegmentedItem>
            </Segmented>
            <Flex Align="center" Justify="center" Class="py-8">
                <Tooltip>
                    <TooltipTrigger>
                        <Button Variant="Button.ButtonVariant.Outline">Hover me (@_tooltipSideSel)</Button>
                    </TooltipTrigger>
                    <TooltipContent Side="@_activeTooltipSide">
                        Tooltip on the <strong>@_tooltipSideSel</strong>.
                    </TooltipContent>
                </Tooltip>
            </Flex>
        </Stack>
    </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">TooltipContent</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">TooltipSide</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Top</td>
                            <td class="p-3 text-muted-foreground">Which side of the trigger the tooltip appears on. Values: Top, Bottom, Left, Right.</td>
                        </tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Offset</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">8</td><td class="p-3 text-muted-foreground">Pixel gap between the trigger and tooltip.</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">true</td><td class="p-3 text-muted-foreground">Renders a small arrow pointing back at the trigger.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">Tooltip / TooltipTrigger</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 italic text-muted-foreground" colspan="4">Tooltip is a group container using CSS group-hover. TooltipTrigger wraps the element that triggers the tooltip on hover.</td>
                        </tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ShowDelay</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">200</td><td class="p-3 text-muted-foreground">Tooltip — milliseconds to wait before showing on hover/focus.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">HideDelay</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">0</td><td class="p-3 text-muted-foreground">Tooltip — milliseconds to wait before hiding on pointer-leave.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    // Interactive: Side
    private string _tooltipSideSel = "Top";
    private TooltipContent.TooltipSide _activeTooltipSide => Enum.Parse<TooltipContent.TooltipSide>(_tooltipSideSel);
    private string _sideInteractiveCode = @"<Segmented @bind-Value=""_sideSel"">
    <SegmentedItem Value=""Top"">Top</SegmentedItem>
    <SegmentedItem Value=""Right"">Right</SegmentedItem>
    <SegmentedItem Value=""Bottom"">Bottom</SegmentedItem>
    <SegmentedItem Value=""Left"">Left</SegmentedItem>
</Segmented>
<Tooltip>
    <TooltipTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Hover me (@_sideSel)</Button>
    </TooltipTrigger>
    <TooltipContent Side=""@_activeTooltipSide"">
        Tooltip on the @_sideSel.
    </TooltipContent>
</Tooltip>

@code {
    private string _sideSel = ""Top"";
    private TooltipContent.TooltipSide _activeTooltipSide =>
        Enum.Parse<TooltipContent.TooltipSide>(_sideSel);
}";

    private string _defaultCode = @"<Tooltip>
    <TooltipTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
        <p>Add to library</p>
    </TooltipContent>
</Tooltip>";

    private string _sideCode = @"<Tooltip>
    <TooltipTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Top</Button>
    </TooltipTrigger>
    <TooltipContent Side=""TooltipContent.TooltipSide.Top"">
        <p>Tooltip on top</p>
    </TooltipContent>
</Tooltip>

<Tooltip>
    <TooltipTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Bottom</Button>
    </TooltipTrigger>
    <TooltipContent Side=""TooltipContent.TooltipSide.Bottom"">
        <p>Tooltip on bottom</p>
    </TooltipContent>
</Tooltip>";

    private string _iconCode = @"<Tooltip>
    <TooltipTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"" Size=""Button.ButtonSize.Icon"">
            <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
        </Button>
    </TooltipTrigger>
    <TooltipContent>
        <p>Bold</p>
    </TooltipContent>
</Tooltip>

<Tooltip>
    <TooltipTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"" Size=""Button.ButtonSize.Icon"">
            <Blazicon Svg=""Lucide.Italic"" class=""h-4 w-4"" />
        </Button>
    </TooltipTrigger>
    <TooltipContent>
        <p>Italic</p>
    </TooltipContent>
</Tooltip>";

    private string _placementCode = @"<Tooltip>
    <TooltipTrigger><Button Variant=""Button.ButtonVariant.Outline"">Top</Button></TooltipTrigger>
    <TooltipContent Side=""TooltipContent.TooltipSide.Top"">Top tooltip</TooltipContent>
</Tooltip>
<Tooltip>
    <TooltipTrigger><Button Variant=""Button.ButtonVariant.Outline"">Bottom</Button></TooltipTrigger>
    <TooltipContent Side=""TooltipContent.TooltipSide.Bottom"">Bottom tooltip</TooltipContent>
</Tooltip>
<Tooltip>
    <TooltipTrigger><Button Variant=""Button.ButtonVariant.Outline"">Left</Button></TooltipTrigger>
    <TooltipContent Side=""TooltipContent.TooltipSide.Left"">Left tooltip</TooltipContent>
</Tooltip>
<Tooltip>
    <TooltipTrigger><Button Variant=""Button.ButtonVariant.Outline"">Right</Button></TooltipTrigger>
    <TooltipContent Side=""TooltipContent.TooltipSide.Right"">Right tooltip</TooltipContent>
</Tooltip>";
}
