<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import SettingsNav, { type SettingsNavItem } from "./SettingsNav.svelte";
	import User from "$icon/user-round";
	import Key from "$icon/key";
	import Mail from "$icon/mail";
	import Bell from "$icon/bell";
	import Volleyball from "$icon/volleyball";
	import Spool from "$icon/spool";
	import Globe from "$icon/globe";

	const items: SettingsNavItem[] = [
		{ id: "profile", label: "Profile", href: "/settings", icon: User },
		{ id: "keys", label: "Keys", href: "/settings/keys", icon: Key },
		{ id: "emails", label: "Emails", href: "/settings/emails", icon: Mail },
		{ id: "notifications", label: "Notifications", href: "/settings/notifications", icon: Bell },
		{ id: "knots", label: "Knots", href: "/settings/knots", icon: Volleyball },
		{ id: "spindles", label: "Spindles", href: "/settings/spindles", icon: Spool },
		{ id: "sites", label: "Sites", href: "/settings/sites", icon: Globe }
	];

	const { Story } = defineMeta({
		title: "Settings/SettingsNav",
		component: SettingsNav,
		tags: ["autodocs"],
		args: { items, active: "profile" }
	});
</script>

<!-- the frame stretches to its container in the settings layout, so the stories put it
     in a tall box rather than letting it hug its items -->
<Story name="Default">
	{#snippet template(args)}
		<div class="flex h-142 w-44 items-stretch">
			<SettingsNav {...args} />
		</div>
	{/snippet}
</Story>

<Story name="Active elsewhere" args={{ active: "notifications" }}>
	{#snippet template(args)}
		<div class="flex h-142 w-44 items-stretch">
			<SettingsNav {...args} />
		</div>
	{/snippet}
</Story>

<!-- the sidebar is a md-and-up shape: narrow the browser under 768px and this story
     renders the select it collapses into instead -->
<Story name="Collapsed">
	{#snippet template(args)}
		<div class="flex w-94.5 items-stretch">
			<SettingsNav {...args} active="keys" />
		</div>
	{/snippet}
</Story>

<Story name="No icons" args={{ items: items.map(({ id, label, href }) => ({ id, label, href })) }}>
	{#snippet template(args)}
		<div class="flex h-142 w-44 items-stretch">
			<SettingsNav {...args} />
		</div>
	{/snippet}
</Story>
