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

const meta: Meta<typeof RadioGroupField> = {
	title: "Widgets/Onboarding/Fields/RadioGroupField",
	component: RadioGroupField,
	parameters: {
		layout: "centered",
		docs: {
			description: {
				component: `
Radio group field for single selection from multiple options in onboarding flows.

Features:
- **Vertical/Horizontal** - Layout orientation via \`orientation\` prop
- **Option Descriptions** - Each option can have helper text
- **Disabled Options** - Individual options can be disabled

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

<RadioGroupField
  id="plan"
  label="Subscription Plan"
  options={[
    { value: 'monthly', label: 'Monthly ($9.99)' },
    { value: 'yearly', label: 'Yearly ($99.99)' },
  ]}
  value={value}
  onChange={setValue}
/>
\`\`\`
        `,
			},
		},
	},
	tags: ["autodocs"],
	argTypes: {
		orientation: {
			control: "radio",
			options: ["vertical", "horizontal"],
			description: "Layout direction for radio options",
		},
		disabled: { control: "boolean" },
		required: { control: "boolean" },
	},
	decorators: [
		(Story) => (
			<div className="w-[400px]">
				<Story />
			</div>
		),
	],
};

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

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

/**
 * Default vertical radio group layout.
 * Use Controls to toggle: orientation, disabled, required
 */
export const Default: Story = {
	render: (args) => <RadioGroupFieldWithState {...args} />,
	args: {
		id: "plan",
		label: "Subscription Plan",
		description: "Choose your billing cycle",
		options: [
			{ value: "monthly", label: "Monthly ($9.99/month)" },
			{ value: "yearly", label: "Yearly ($99.99/year)" },
			{ value: "lifetime", label: "Lifetime ($299.99)" },
		],
		value: "",
	},
};

/**
 * Horizontal layout for compact option groups.
 * Best for short labels like sizes or ratings.
 */
export const Horizontal: Story = {
	render: (args) => <RadioGroupFieldWithState {...args} />,
	args: {
		id: "size",
		label: "Size",
		orientation: "horizontal",
		options: [
			{ value: "sm", label: "Small" },
			{ value: "md", label: "Medium" },
			{ value: "lg", label: "Large" },
			{ value: "xl", label: "X-Large" },
		],
		value: "md",
	},
};

/**
 * Options with descriptions for additional context.
 * Best for complex choices that need explanation.
 */
export const WithDescriptions: Story = {
	name: "With Option Descriptions",
	render: (args) => <RadioGroupFieldWithState {...args} />,
	args: {
		id: "tier",
		label: "Select a Plan",
		options: [
			{
				value: "starter",
				label: "Starter",
				description: "Perfect for individuals and small projects",
			},
			{
				value: "pro",
				label: "Pro",
				description: "For growing teams with advanced needs",
			},
			{
				value: "enterprise",
				label: "Enterprise",
				description: "Custom solutions for large organizations",
			},
		],
		value: "",
	},
};