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

const meta: Meta<typeof TextInputField> = {
	title: "Widgets/Onboarding/Fields/TextInputField",
	component: TextInputField,
	parameters: {
		layout: "centered",
		docs: {
			description: {
				component: `
Text input field for collecting user information in onboarding flows.

Supports multiple input types and a select variant:
- **text** - Standard text input (default)
- **email** - Email input with validation
- **url** - URL input with validation
- **tel** - Phone number input
- **select** - Dropdown select (set \`fieldType="select"\`)

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

<TextInputField
  id="email"
  label="Email Address"
  placeholder="you@example.com.ai"
  type="email"
  required
  value={value}
  onChange={setValue}
/>
\`\`\`
        `,
			},
		},
	},
	tags: ["autodocs"],
	argTypes: {
		type: {
			control: "select",
			options: ["text", "email", "url", "tel"],
			description: "Input type for validation and keyboard",
		},
		fieldType: {
			control: "select",
			options: ["text", "select"],
			description: "Use 'select' for dropdown",
		},
		required: { control: "boolean" },
		disabled: { control: "boolean" },
		error: { control: "text", description: "Error message to display" },
		touched: {
			control: "boolean",
			description: "Whether field has been interacted with",
		},
	},
	decorators: [
		(Story) => (
			<div className="w-[400px]">
				<Story />
			</div>
		),
	],
};

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

// Wrapper to handle controlled state
function TextInputFieldWithState(
	props: React.ComponentProps<typeof TextInputField>,
) {
	const [value, setValue] = useState(props.value || "");
	const [touched, setTouched] = useState(props.touched || false);

	return (
		<TextInputField
			{...props}
			value={value}
			onChange={setValue}
			onBlur={() => setTouched(true)}
			touched={touched}
		/>
	);
}

/**
 * Default text input field.
 * Use Controls to change: type (email, url, tel), required, disabled, error
 */
export const Default: Story = {
	render: (args) => <TextInputFieldWithState {...args} />,
	args: {
		id: "name",
		label: "Full Name",
		placeholder: "Enter your full name",
		description: "This will be displayed on your profile",
		value: "",
	},
};

/**
 * Select dropdown variant for choosing from predefined options.
 * Use Controls to toggle: required, disabled, error
 */
export const Select: Story = {
	render: (args) => <TextInputFieldWithState {...args} />,
	args: {
		id: "country",
		label: "Country",
		placeholder: "Select a country",
		fieldType: "select",
		options: [
			{ 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" },
		],
		value: "",
	},
};

/**
 * Field with validation error displayed.
 * Shows how error messages appear to users.
 */
export const WithError: Story = {
	args: {
		id: "email",
		label: "Email Address",
		placeholder: "you@example.com.ai",
		type: "email",
		required: true,
		value: "invalid-email",
		error: "Please enter a valid email address",
		touched: true,
	},
};