<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import ChevronDown from "$icon/chevron-down";
	import Pencil from "$icon/pencil";
	import Settings from "$icon/settings";
	import LogOut from "$icon/log-out";
	import Dropdown from "./Dropdown.svelte";
	import DropdownItem from "./DropdownItem.svelte";

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

<!-- Dropdown's `trigger` and `children` are snippet props, so the trigger content is
	declared once below and passed by reference; every story renders via `asChild` rather
	than through the args table. Click the trigger in the canvas to open the menu —
	`open` is internal state, not a prop. -->

{#snippet menuTrigger()}
	<span>Menu</span>
	<ChevronDown class="size-4" />
{/snippet}

{#snippet actionsTrigger()}
	<span>Actions</span>
	<ChevronDown class="size-4" />
{/snippet}

{#snippet firstTrigger()}
	<span>First</span>
	<ChevronDown class="size-4" />
{/snippet}

{#snippet secondTrigger()}
	<span>Second</span>
	<ChevronDown class="size-4" />
{/snippet}

<Story name="Plain trigger" asChild>
	<Dropdown trigger={menuTrigger} label="Menu">
		<DropdownItem icon={Pencil}>Edit</DropdownItem>
		<DropdownItem icon={Settings}>Settings</DropdownItem>
		<DropdownItem icon={LogOut} danger>Log out</DropdownItem>
	</Dropdown>
</Story>

<Story name="Button trigger" asChild>
	<Dropdown variant="button" trigger={actionsTrigger} label="Actions">
		<DropdownItem icon={Pencil}>Edit</DropdownItem>
		<DropdownItem icon={Settings}>Settings</DropdownItem>
	</Dropdown>
</Story>

<!-- `size` goes straight to the trigger Button, so it drives the trigger's height,
	padding and label size the same way it does on a standalone Button. -->
<Story name="Button trigger sizes" asChild>
	<div class="flex items-center gap-3">
		<Dropdown variant="button" size="sm" trigger={actionsTrigger} label="Actions">
			<DropdownItem icon={Pencil}>Edit</DropdownItem>
			<DropdownItem icon={Settings}>Settings</DropdownItem>
		</Dropdown>
		<Dropdown variant="button" size="md" trigger={actionsTrigger} label="Actions">
			<DropdownItem icon={Pencil}>Edit</DropdownItem>
			<DropdownItem icon={Settings}>Settings</DropdownItem>
		</Dropdown>
		<Dropdown variant="button" size="lg" trigger={actionsTrigger} label="Actions">
			<DropdownItem icon={Pencil}>Edit</DropdownItem>
			<DropdownItem icon={Settings}>Settings</DropdownItem>
		</Dropdown>
	</div>
</Story>

<!-- `align="right"` anchors the menu's right edge to the trigger, for triggers near
	the right edge of the viewport (e.g. the topbar profile menu). Default is left. -->
<Story name="Right aligned" asChild>
	<div class="flex justify-end">
		<Dropdown align="right" trigger={menuTrigger} label="Menu">
			<DropdownItem icon={Pencil}>Edit</DropdownItem>
			<DropdownItem icon={Settings}>Settings</DropdownItem>
		</Dropdown>
	</div>
</Story>

<!-- DropdownItem states: plain text, with icon, as a link (href), and the danger variant. -->
<Story name="Item states" asChild>
	<Dropdown trigger={menuTrigger} label="Menu">
		<DropdownItem>Plain item</DropdownItem>
		<DropdownItem icon={Settings}>With icon</DropdownItem>
		<DropdownItem href="/">Link item</DropdownItem>
		<DropdownItem icon={LogOut} danger>Danger item</DropdownItem>
	</Dropdown>
</Story>

<!-- Dropdowns sharing a `group` close their siblings when one opens. -->
<Story name="Grouped" asChild>
	<div class="flex gap-3">
		<Dropdown group="story-group" trigger={firstTrigger} label="First">
			<DropdownItem>One</DropdownItem>
			<DropdownItem>Two</DropdownItem>
		</Dropdown>
		<Dropdown group="story-group" trigger={secondTrigger} label="Second">
			<DropdownItem>Three</DropdownItem>
			<DropdownItem>Four</DropdownItem>
		</Dropdown>
	</div>
</Story>
