import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { Combobox } from './combobox';

const frameworks = [
  { label: 'Next.js', value: 'next' },
  { label: 'Remix', value: 'remix' },
  { label: 'Astro', value: 'astro' },
  { label: 'Nuxt', value: 'nuxt' },
  { label: 'SvelteKit', value: 'sveltekit' },
  { label: 'SolidStart', value: 'solid' },
  { label: 'Angular (deprecated here)', value: 'angular', disabled: true },
];

const meta = {
  title: 'Components/Combobox',
  component: Combobox,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Select-with-search, composed from Command and Popover. Use it once a Select list is long enough that scanning becomes tedious — roughly a dozen options. Choosing the already-selected option clears it.',
      },
    },
  },
  tags: ['autodocs'],
  args: { options: frameworks },
} satisfies Meta<typeof Combobox>;

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

export const Default: Story = {};

export const Controlled: Story = {
  render: function ControlledStory(args) {
    const [value, setValue] = React.useState('remix');

    return (
      <div className="grid gap-3">
        <Combobox {...args} value={value} onValueChange={setValue} />
        <p className="text-sm text-muted-foreground">
          Selected: <code>{value || '—'}</code>
        </p>
      </div>
    );
  },
};

export const Disabled: Story = {
  args: { disabled: true, defaultValue: 'astro' },
};

export const CustomCopy: Story = {
  args: {
    placeholder: 'Choose a framework…',
    searchPlaceholder: 'Filter frameworks…',
    emptyMessage: 'Nothing matches that.',
    className: 'w-[260px]',
  },
};