<script>
	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
	import Multiselect from "./shared/Multiselect.svelte";
	import { format } from "svelte-i18n";
	import { get } from "svelte/store";
</script>

<Meta
	title="Components/Multiselect"
	component={Multiselect}
	argTypes={{
		multiselect: {
			control: [true, false],
			name: "multiselect",
			value: false
		}
	}}
/>

<Template let:args>
	<Multiselect {...args} i18n={get(format)} />
</Template>

<Story
	name="Multiselect Interactive"
	args={{
		value: ["swim", "run"],
		choices: [
			["run", "run"],
			["swim", "swim"],
			["jump", "jump"]
		],
		label: "Multiselect Dropdown"
	}}
/>
<Story
	name="Multiselect Static"
	args={{
		value: ["swim", "run"],
		choices: [
			["run", "run"],
			["swim", "swim"],
			["jump", "jump"]
		],
		label: "Multiselect Dropdown",
		disabled: true
	}}
/>