<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import Field from "./Field.svelte";
	import Select from "./Select.svelte";

	const { Story } = defineMeta({
		title: "UI/Field",
		component: Field,
		tags: ["autodocs"],
		argTypes: {
			label: { control: "text" },
			subtitle: { control: "text" },
			required: { control: "boolean" }
		},
		args: {
			label: "Label",
			subtitle: "Subtitle",
			required: false
		}
	});
</script>

<!-- Field wraps any form control via its `children` snippet. -->
<Story name="Default">
	{#snippet template(args)}
		<Field {...args} for="field-default">
			<input
				id="field-default"
				type="text"
				placeholder="Placeholder"
				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
			/>
		</Field>
	{/snippet}
</Story>

<Story name="LabelOnly" args={{ subtitle: undefined }}>
	{#snippet template(args)}
		<Field {...args} for="field-label-only">
			<input
				id="field-label-only"
				type="text"
				placeholder="Placeholder"
				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
			/>
		</Field>
	{/snippet}
</Story>

<Story name="Required" args={{ required: true }}>
	{#snippet template(args)}
		<Field {...args} for="field-required">
			<input
				id="field-required"
				type="text"
				placeholder="Placeholder"
				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
			/>
		</Field>
	{/snippet}
</Story>

<Story name="WithSelect">
	{#snippet template(args)}
		<Field {...args} for="field-select">
			<Select
				id="field-select"
				placeholder="Select"
				options={[
					{ value: "one", label: "One" },
					{ value: "two", label: "Two" }
				]}
			/>
		</Field>
	{/snippet}
</Story>

<Story name="WithInput">
	{#snippet template(args)}
		<Field {...args} for="field-input">
			<input
				id="field-input"
				type="text"
				placeholder="Placeholder"
				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
			/>
		</Field>
	{/snippet}
</Story>
