<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import Plus from "$icon/plus";
	import Button from "./Button.svelte";
	import Tooltip from "./Tooltip.svelte";

	const { Story } = defineMeta({
		title: "UI/Tooltip",
		component: Tooltip,
		tags: ["autodocs"]
	});
</script>

<!-- Tooltip's `children` is the trigger it wraps, so every story renders via `asChild`
	rather than through the args table. Hover or tab to the trigger in the canvas — `open`
	is internal state unless you bind it. The stories pad generously because the bubble is
	a popover in the top layer and would otherwise sit over the canvas edge. -->

{#snippet richContent()}
	<span class="font-medium">Sign the commit</span>
	<span class="block text-foreground-on-emphasis/70">
		Requires a key registered on your account.
	</span>
{/snippet}

<Story name="Default" asChild>
	<div class="flex justify-center p-16">
		<Tooltip content="Add to library">
			<Button>Hover me</Button>
		</Tooltip>
	</div>
</Story>

<!-- `side` picks the preferred edge; the bubble still flips to the opposite one when the
	preferred side would overflow the viewport. -->
<Story name="Sides" asChild>
	<div class="flex justify-center gap-2 p-16">
		{#each ["left", "top", "bottom", "right"] as const as side (side)}
			<Tooltip {side} content={side}>
				<Button>{side}</Button>
			</Tooltip>
		{/each}
	</div>
</Story>

<!-- the canonical use: an icon-only button whose aria-label and tooltip say the same thing -->
<Story name="Icon button" asChild>
	<div class="flex justify-center p-16">
		<Tooltip content="New issue">
			<Button icon={Plus} aria-label="New issue" class="px-2" />
		</Tooltip>
	</div>
</Story>

<!-- `content` also takes a snippet when a single string is not enough -->
<Story name="Rich content" asChild>
	<div class="flex justify-center p-16">
		<Tooltip content={richContent}>
			<Button>Signed commits</Button>
		</Tooltip>
	</div>
</Story>

<!-- `delay={0}` opens on hover with no wait. Note that once any tooltip has been shown,
	moving to a neighbouring trigger opens instantly regardless of delay. -->
<Story name="No delay" asChild>
	<div class="flex justify-center gap-2 p-16">
		<Tooltip content="Opens immediately" delay={0}>
			<Button>No delay</Button>
		</Tooltip>
		<Tooltip content="Waits 700ms" delay={700}>
			<Button>Slow</Button>
		</Tooltip>
	</div>
</Story>

<!-- the arrow points at whichever edge the bubble actually landed on, so it stays correct
	even when the preferred side had to flip. `arrow={false}` drops it. -->
<Story name="No arrow" asChild>
	<div class="flex justify-center p-16">
		<Tooltip content="No pointer" arrow={false}>
			<Button>No arrow</Button>
		</Tooltip>
	</div>
</Story>

<!-- `disabled` skips the tooltip without changing the markup around the trigger -->
<Story name="Disabled" asChild>
	<div class="flex justify-center p-16">
		<Tooltip content="You will not see this" disabled>
			<Button>No tooltip</Button>
		</Tooltip>
	</div>
</Story>
