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

const meta: Meta<typeof DropdownField> = {
	title: "Widgets/Onboarding/Fields/DropdownField",
	component: DropdownField,
	parameters: {
		layout: "centered",
		docs: {
			description: {
				component: `
Dropdown select field for choosing from a list of options in onboarding flows.

Supports both flat and grouped option lists:
- **Flat options** - Simple list of choices
- **Grouped options** - Categorized options with group labels

\`\`\`tsx
import { DropdownField } from '@mdxui/widgets'

<DropdownField
  id="country"
  label="Country"
  placeholder="Select a country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
  ]}
  value={value}
  onChange={setValue}
/>
\`\`\`
        `,
			},
		},
	},
	tags: ["autodocs"],
	argTypes: {
		required: { control: "boolean" },
		disabled: { control: "boolean" },
	},
	decorators: [
		(Story) => (
			<div className="w-[400px]">
				<Story />
			</div>
		),
	],
};

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

// Sample options
const countryOptions = [
	{ value: "us", label: "United States" },
	{ value: "uk", label: "United Kingdom" },
	{ value: "ca", label: "Canada" },
	{ value: "au", label: "Australia" },
	{ value: "de", label: "Germany" },
	{ value: "fr", label: "France" },
];

const groupedOptions = [
	{
		label: "North America",
		options: [
			{ value: "us", label: "United States" },
			{ value: "ca", label: "Canada" },
			{ value: "mx", label: "Mexico" },
		],
	},
	{
		label: "Europe",
		options: [
			{ value: "uk", label: "United Kingdom" },
			{ value: "de", label: "Germany" },
			{ value: "fr", label: "France" },
		],
	},
	{
		label: "Asia Pacific",
		options: [
			{ value: "jp", label: "Japan" },
			{ value: "au", label: "Australia" },
			{ value: "sg", label: "Singapore" },
		],
	},
];

// Wrapper to handle controlled state
function DropdownFieldWithState(
	props: React.ComponentProps<typeof DropdownField>,
) {
	const [value, setValue] = useState(props.value || "");
	return <DropdownField {...props} value={value} onChange={setValue} />;
}

/**
 * Default dropdown with flat options list.
 * Use Controls to toggle: required, disabled, value
 */
export const Default: Story = {
	render: (args) => <DropdownFieldWithState {...args} />,
	args: {
		id: "country",
		label: "Country",
		placeholder: "Select a country",
		description: "Where is your company headquartered?",
		options: countryOptions,
		value: "",
	},
};

/**
 * Grouped options with category headers.
 * Best for large option sets that benefit from organization.
 */
export const Grouped: Story = {
	name: "Grouped Options",
	render: (args) => <DropdownFieldWithState {...args} />,
	args: {
		id: "region",
		label: "Deployment Region",
		description: "Select your preferred deployment region",
		placeholder: "Select a region",
		options: groupedOptions,
		value: "",
	},
};