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

const meta: Meta<typeof BooleanField> = {
	title: "Widgets/Onboarding/Fields/BooleanField",
	component: BooleanField,
	parameters: {
		layout: "centered",
		docs: {
			description: {
				component: `
Boolean field component for yes/no choices in onboarding flows.

Supports three display modes:
- **Toggle** - Checkbox style for enabling/disabling features
- **Yes/No** - Card buttons for prominent binary choices
- **Radio** - Simple radio buttons for compact yes/no questions

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

<BooleanField
  id="notifications"
  label="Enable email notifications"
  description="Receive updates about your account"
  mode="toggle"
  value={value}
  onChange={setValue}
/>
\`\`\`
        `,
			},
		},
	},
	tags: ["autodocs"],
	argTypes: {
		mode: {
			control: "select",
			options: ["toggle", "yesno", "radio"],
			description: "Display mode for the boolean field",
		},
		value: { control: "boolean" },
		disabled: { control: "boolean" },
		requiredTrue: {
			control: "boolean",
			description: "If true, user must select 'yes' to proceed",
		},
		yesLabel: { control: "text", description: "Custom label for yes option" },
		noLabel: { control: "text", description: "Custom label for no option" },
	},
	decorators: [
		(Story) => (
			<div className="w-[400px]">
				<Story />
			</div>
		),
	],
};

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

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

/**
 * Toggle mode displays a checkbox-style control.
 * Best for enabling/disabling features or accepting terms.
 *
 * Use Controls to toggle: disabled, requiredTrue, value
 */
export const Toggle: Story = {
	render: (args) => <BooleanFieldWithState {...args} />,
	args: {
		id: "notifications",
		label: "Enable email notifications",
		description: "Receive updates about your account activity",
		mode: "toggle",
		value: false,
	},
};

/**
 * Yes/No mode displays two card buttons side by side.
 * Best for prominent binary choices that need visual emphasis.
 *
 * Use Controls to customize: yesLabel, noLabel, disabled
 */
export const YesNo: Story = {
	name: "Yes/No Cards",
	render: (args) => <BooleanFieldWithState {...args} />,
	args: {
		id: "data-sharing",
		label: "Do you want to share anonymous usage data?",
		description: "This helps us improve the product",
		mode: "yesno",
		yesLabel: "Yes",
		noLabel: "No",
		value: false,
	},
};

/**
 * Radio mode displays simple radio buttons.
 * Best for compact yes/no questions in longer forms.
 *
 * Use Controls to customize: yesLabel, noLabel, disabled
 */
export const Radio: Story = {
	render: (args) => <BooleanFieldWithState {...args} />,
	args: {
		id: "existing-customer",
		label: "Are you an existing customer?",
		description: "Select yes if you have an existing account",
		mode: "radio",
		yesLabel: "Yes",
		noLabel: "No",
		value: false,
	},
};