import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import { ProductSelectField } from "./ProductSelectField";
import type { ProductCategory } from "../types/fields";

const meta: Meta<typeof ProductSelectField> = {
	title: "Widgets/Onboarding/Fields/ProductSelectField",
	component: ProductSelectField,
	parameters: {
		layout: "centered",
		docs: {
			description: {
				component: `
Product/feature selection field for onboarding flows.

Displays expandable category cards with optional subcategories:
- **Categories** - Main selection items with expand/collapse
- **Subcategories** - Nested items shown when category is expanded
- **Multi-select** - Users can select multiple categories

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

<ProductSelectField
  categories={[
    { id: 'analytics', title: 'Analytics', subcategories: ['Reports', 'Dashboards'] },
    { id: 'automation', title: 'Automation', subcategories: ['Workflows', 'Triggers'] },
  ]}
  selectedIds={selected}
  onChange={setSelected}
/>
\`\`\`
        `,
			},
		},
	},
	tags: ["autodocs"],
	argTypes: {
		disabled: { control: "boolean" },
	},
	decorators: [
		(Story) => (
			<div className="w-[500px]">
				<Story />
			</div>
		),
	],
};

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

// Sample categories with subcategories
const productCategories: ProductCategory[] = [
	{
		id: "analytics",
		title: "Analytics & Reporting",
		subcategories: ["Dashboards", "Custom Reports", "Data Export"],
	},
	{
		id: "automation",
		title: "Automation",
		subcategories: ["Workflows", "Triggers", "Scheduled Tasks"],
	},
	{
		id: "integrations",
		title: "Integrations",
		subcategories: ["Slack", "Zapier", "Webhooks", "API Access"],
	},
	{
		id: "security",
		title: "Security & Compliance",
		subcategories: ["SSO", "2FA", "Audit Logs", "GDPR"],
	},
];

// Wrapper to handle controlled state
function ProductSelectFieldWithState(
	props: React.ComponentProps<typeof ProductSelectField>,
) {
	const [selectedIds, setSelectedIds] = useState<string[]>(props.selectedIds || []);
	return (
		<ProductSelectField
			{...props}
			selectedIds={selectedIds}
			onChange={setSelectedIds}
		/>
	);
}

/**
 * Default product selection with expandable categories.
 * Use Controls to toggle: disabled
 */
export const Default: Story = {
	render: (args) => <ProductSelectFieldWithState {...args} />,
	args: {
		categories: productCategories,
		selectedIds: [],
		ariaLabel: "Select product features",
	},
};

/**
 * Simple categories without subcategories.
 * Best for simple multi-select scenarios.
 */
export const Simple: Story = {
	name: "Simple Categories",
	render: (args) => <ProductSelectFieldWithState {...args} />,
	args: {
		categories: [
			{ id: "basic", title: "Basic Plan", subcategories: [] },
			{ id: "pro", title: "Professional Plan", subcategories: [] },
			{ id: "enterprise", title: "Enterprise Plan", subcategories: [] },
		],
		selectedIds: [],
		ariaLabel: "Select plan",
	},
};