<script module lang="ts">
	import { resolve } from "$app/paths";
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import Select from "./Select.svelte";
	import type { SelectOption } from "./selectField";

	const { Story } = defineMeta({
		title: "UI/Select",
		component: Select,
		tags: ["autodocs"],
		argTypes: {
			rich: { control: "boolean" },
			error: { control: "boolean" },
			disabled: { control: "boolean" }
		},
		args: {
			rich: false,
			error: false,
			disabled: false,
			label: "Pick one",
			value: "two",
			options: [
				{ value: "one", label: "One" },
				{ value: "two", label: "Two" },
				{ value: "three", label: "Three" }
			] satisfies SelectOption[]
		}
	});

	const refs: SelectOption[] = [
		{ value: "main", hint: "default", group: "Branches" },
		{ value: "next", group: "Branches" },
		{ value: "feature/combobox", group: "Branches" },
		{ value: "feature/storybook", group: "Branches" },
		{ value: "v1.0.0", group: "Tags" },
		{ value: "v0.9.0", group: "Tags" }
	];

	const many: SelectOption[] = Array.from({ length: 60 }, (_, index) => ({
		value: index === 0 ? "main" : `renovate/dependency-${index}`,
		hint: index === 0 ? "default" : undefined,
		group: "Branches"
	}));
</script>

<!-- the same options render either way: `rich` only changes the control drawn around them -->
<Story name="Native">
	{#snippet template(args)}
		<div class="w-64"><Select {...args} /></div>
	{/snippet}
</Story>

<Story name="Rich" args={{ rich: true }}>
	{#snippet template(args)}
		<div class="w-64"><Select {...args} /></div>
	{/snippet}
</Story>

<Story name="Placeholder" args={{ value: "", placeholder: "Choose one" }}>
	{#snippet template(args)}
		<div class="w-64"><Select {...args} /></div>
	{/snippet}
</Story>

<Story name="Grouped" args={{ options: refs, value: "main" }}>
	{#snippet template(args)}
		<div class="w-64"><Select {...args} /></div>
	{/snippet}
</Story>

<Story name="Grouped rich" args={{ rich: true, options: refs, value: "main" }}>
	{#snippet template(args)}
		<div class="w-64"><Select {...args} /></div>
	{/snippet}
</Story>

<Story
	name="Rich value outside the options"
	args={{ rich: true, options: refs, value: "0123456789abcdef" }}
>
	{#snippet template(args)}
		<div class="w-64"><Select {...args} /></div>
	{/snippet}
</Story>

<Story name="Rich scrolling list with a footer" args={{ rich: true, options: many, value: "main" }}>
	{#snippet template(args)}
		<div class="w-64">
			<Select {...args}>
				{#snippet footer()}
					<a href={resolve("/")} class="block p-2 typography-paragraph-small">View all branches</a>
				{/snippet}
			</Select>
		</div>
	{/snippet}
</Story>

<Story
	name="Disabled options"
	args={{
		rich: true,
		value: "main",
		options: [
			{ value: "main", hint: "default", group: "Branches" },
			{ value: "next", group: "Branches" },
			{ value: "No tags found", disabled: true, group: "Tags" }
		]
	}}
>
	{#snippet template(args)}
		<div class="w-64"><Select {...args} /></div>
	{/snippet}
</Story>

<Story name="Right aligned" args={{ rich: true, align: "right" }}>
	{#snippet template(args)}
		<div class="flex justify-end">
			<div class="w-64"><Select {...args} /></div>
		</div>
	{/snippet}
</Story>

<Story name="Error" args={{ error: true }}>
	{#snippet template(args)}
		<div class="w-64"><Select {...args} /></div>
	{/snippet}
</Story>

<Story name="Error rich" args={{ rich: true, error: true }}>
	{#snippet template(args)}
		<div class="w-64"><Select {...args} /></div>
	{/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
	{#snippet template(args)}
		<div class="w-64"><Select {...args} /></div>
	{/snippet}
</Story>

<Story name="Disabled rich" args={{ rich: true, disabled: true }}>
	{#snippet template(args)}
		<div class="w-64"><Select {...args} /></div>
	{/snippet}
</Story>
