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

const meta: Meta<typeof ScaleInputField> = {
	title: "Widgets/Onboarding/Fields/ScaleInputField",
	component: ScaleInputField,
	parameters: {
		layout: "centered",
		docs: {
			description: {
				component: `
Numeric scale input field with optional slider for onboarding flows.

Features:
- **Slider + Input** - Visual slider with numeric input (default)
- **Input Only** - Numeric input without slider (set \`showSlider={false}\`)
- **Custom Formatting** - Currency, percentages, units via \`formatValue\`
- **Auto-formatting** - Large numbers auto-format with K/M suffixes

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

<ScaleInputField
  id="users"
  label="Team Size"
  min={1}
  max={100}
  value={value}
  onChange={setValue}
  unit="users"
/>
\`\`\`
        `,
			},
		},
	},
	tags: ["autodocs"],
	argTypes: {
		showSlider: {
			control: "boolean",
			description: "Show slider control alongside input",
		},
		disabled: { control: "boolean" },
		min: { control: "number" },
		max: { control: "number" },
		step: { control: "number" },
		unit: { control: "text", description: "Unit label (e.g., 'GB', 'users')" },
	},
	decorators: [
		(Story) => (
			<div className="w-[400px]">
				<Story />
			</div>
		),
	],
};

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

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

/**
 * Default scale input with slider and numeric input.
 * Use Controls to adjust: min, max, step, unit, showSlider, disabled
 */
export const Default: Story = {
	render: (args) => <ScaleInputFieldWithState {...args} />,
	args: {
		id: "users",
		label: "Team Size",
		description: "How many people will use this product?",
		min: 1,
		max: 100,
		value: 10,
		unit: "users",
	},
};

/**
 * Custom value formatting for currency, percentages, etc.
 * Demonstrates formatValue prop for display customization.
 */
export const CustomFormat: Story = {
	name: "Custom Formatting",
	render: (args) => <ScaleInputFieldWithState {...args} />,
	args: {
		id: "budget",
		label: "Monthly Budget",
		description: "Set your monthly spending limit",
		min: 0,
		max: 10000,
		step: 100,
		value: 2500,
		formatValue: (value: number) =>
			`$${value.toLocaleString("en-US", { minimumFractionDigits: 0 })}`,
	},
};

/**
 * Input-only mode without the slider.
 * Best for wide numeric ranges or precise values.
 */
export const InputOnly: Story = {
	name: "Input Only",
	render: (args) => <ScaleInputFieldWithState {...args} />,
	args: {
		id: "quantity",
		label: "Quantity",
		description: "Enter the exact quantity needed",
		min: 1,
		max: 99999,
		value: 500,
		showSlider: false,
	},
};