<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import Search from "$icon/search";
	import Mail from "$icon/mail";
	import Button from "./Button.svelte";
	import Input from "./Input.svelte";

	const { Story } = defineMeta({
		title: "UI/Input",
		component: Input,
		tags: ["autodocs"],
		argTypes: {
			size: {
				control: { type: "inline-radio" },
				options: ["sm", "md", "lg"]
			},
			error: { control: "boolean" },
			disabled: { control: "boolean" },
			loading: { control: "boolean" },
			placeholder: { control: "text" }
		},
		args: {
			size: "md",
			error: false,
			disabled: false,
			loading: false,
			placeholder: "Placeholder"
		}
	});
</script>

<Story name="Default" />
<Story name="Focus" args={{ autofocus: true }} />
<Story name="Filled" args={{ value: "Filled value" }} />
<Story name="Error" args={{ error: true, value: "Invalid value" }} />
<Story name="Disabled" args={{ disabled: true, value: "Can't edit this" }} />
<Story name="Loading" args={{ loading: true, value: "Checking..." }} />
<Story name="With left icon" args={{ iconLeft: Search, placeholder: "Search" }} />
<Story name="With right icon" args={{ iconRight: Mail, placeholder: "you@example.com" }} />

<!-- 32/36/40, the same heights Button's sm/md/lg draw, so the two align in a row. -->
<Story name="Sizes" asChild>
	<div class="flex items-center gap-3">
		<Input size="sm" placeholder="Small" />
		<Input size="md" placeholder="Medium" />
		<Input size="lg" placeholder="Large" />
	</div>
</Story>

<!-- the icon rides the size variant's gap and steps up to size-5 at lg, as in Button. -->
<Story name="Icon sizes" asChild>
	<div class="flex items-center gap-3">
		<Input size="sm" iconLeft={Search} placeholder="Small" />
		<Input size="md" iconLeft={Search} placeholder="Medium" />
		<Input size="lg" iconLeft={Search} placeholder="Large" />
	</div>
</Story>

<!-- proof of the alignment claim: matched sizes, identical box heights. -->
<Story name="With Button" asChild>
	<div class="flex flex-col items-start gap-3">
		{#each ["sm", "md", "lg"] as const as s (s)}
			<div class="flex items-center gap-2">
				<Input size={s} placeholder="Repository name" />
				<Button size={s}>Create</Button>
			</div>
		{/each}
	</div>
</Story>
