import type { Meta, StoryObj } from "@storybook/react";
import { MultiSelectField } from "./MultiSelectField";

const meta: Meta<typeof MultiSelectField> = {
	title: "Widgets/Onboarding/Fields/MultiSelectField",
	component: MultiSelectField,
	parameters: {
		layout: "centered",
	},
	tags: ["autodocs"],
	argTypes: {
		value: { control: "object" },
		onChange: { action: "changed" },
		disabled: { control: "boolean" },
	},
};

export default meta;
type Story = StoryObj<typeof meta>;

const languageOptions = [
	{ value: "en", label: "English" },
	{ value: "es", label: "Spanish" },
	{ value: "fr", label: "French" },
	{ value: "de", label: "German" },
	{ value: "it", label: "Italian" },
	{ value: "pt", label: "Portuguese" },
	{ value: "ja", label: "Japanese" },
	{ value: "zh", label: "Chinese" },
];

export const Default: Story = {
	args: {
		id: "languages",
		label: "Languages",
		placeholder: "Select languages...",
		searchPlaceholder: "Search languages...",
		emptyMessage: "No languages found.",
		options: languageOptions,
		value: [],
	},
};

export const WithValue: Story = {
	args: {
		id: "languages",
		label: "Languages",
		placeholder: "Select languages...",
		searchPlaceholder: "Search languages...",
		emptyMessage: "No languages found.",
		options: languageOptions,
		value: ["en", "es", "fr"],
	},
};

export const WithDescription: Story = {
	args: {
		id: "languages",
		label: "Languages",
		description: "Select the languages you want to support",
		placeholder: "Select languages...",
		searchPlaceholder: "Search languages...",
		emptyMessage: "No languages found.",
		options: languageOptions,
		value: [],
	},
};

export const WithMinMax: Story = {
	args: {
		id: "languages",
		label: "Languages",
		description: "Select between 2 and 5 languages",
		placeholder: "Select languages...",
		searchPlaceholder: "Search languages...",
		emptyMessage: "No languages found.",
		options: languageOptions,
		value: ["en"],
		minSelections: 2,
		maxSelections: 5,
	},
};

export const WithError: Story = {
	args: {
		id: "languages",
		label: "Languages",
		placeholder: "Select languages...",
		searchPlaceholder: "Search languages...",
		emptyMessage: "No languages found.",
		options: languageOptions,
		value: [],
		error: "Please select at least one language",
		touched: true,
	},
};

export const Disabled: Story = {
	args: {
		id: "languages",
		label: "Languages",
		placeholder: "Select languages...",
		searchPlaceholder: "Search languages...",
		emptyMessage: "No languages found.",
		options: languageOptions,
		value: ["en", "es"],
		disabled: true,
	},
};