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

const meta: Meta<typeof RangeSliderField> = {
	title: "Widgets/Onboarding/Fields/RangeSliderField",
	component: RangeSliderField,
	parameters: {
		layout: "centered",
		docs: {
			description: {
				component: `
Range slider field for selecting a numeric range in onboarding flows.

Features:
- **Dual Handles** - Select min and max values
- **Units** - Prefix ($100) or suffix (100 GB)
- **Custom Formatting** - Format values for display (e.g., "$50k")
- **Min/Max Labels** - Optional boundary labels

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

<RangeSliderField
  id="price-range"
  label="Price Range"
  min={0}
  max={1000}
  step={10}
  value={[200, 800]}
  unit="$"
  unitPosition="prefix"
  onChange={setValue}
/>
\`\`\`
        `,
			},
		},
	},
	tags: ["autodocs"],
	argTypes: {
		disabled: { control: "boolean" },
		showMinMax: { control: "boolean", description: "Show min/max boundary labels" },
		unitPosition: {
			control: "radio",
			options: ["prefix", "suffix"],
			description: "Position of unit relative to value",
		},
		min: { control: "number" },
		max: { control: "number" },
		step: { control: "number" },
		unit: { control: "text" },
	},
	decorators: [
		(Story) => (
			<div className="w-[400px]">
				<Story />
			</div>
		),
	],
};

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

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

/**
 * Default range slider with currency prefix.
 * Use Controls to adjust: min, max, step, unit, unitPosition, showMinMax
 */
export const Default: Story = {
	render: (args) => <RangeSliderFieldWithState {...args} />,
	args: {
		id: "price-range",
		label: "Price Range",
		description: "Set your preferred price range",
		min: 0,
		max: 1000,
		step: 10,
		value: [200, 800],
		unit: "$",
		unitPosition: "prefix",
	},
};

/**
 * Range slider with custom value formatting.
 * Demonstrates formatValue prop for complex display.
 */
export const CustomFormat: Story = {
	name: "Custom Formatting",
	render: (args) => <RangeSliderFieldWithState {...args} />,
	args: {
		id: "salary",
		label: "Salary Range",
		description: "Expected salary range for the position",
		min: 50000,
		max: 200000,
		step: 5000,
		value: [75000, 125000],
		formatValue: (val) => `$${(val / 1000).toFixed(0)}k`,
	},
};