import type { Meta, StoryObj } from '../../story.types';
import type { Option } from '../types';
import { AsyncMultipleSearchSelect } from './async-multiple-search-select.component';

type Story = StoryObj<AsyncMultipleSearchSelect>;

const fewOptions: Option[] = [
  { value: 't1', label: 'urgent' },
  { value: 't2', label: 'frontend' },
  { value: 't3', label: 'backend' },
];

const longOptions: Option[] = Array.from({ length: 50 }, (_, i) => ({
  value: `o${i + 1}`,
  label: `Option ${String(i + 1).padStart(3, '0')}`,
}));

const meta: Meta<AsyncMultipleSearchSelect> = {
  title: '@aurora/components/async-multiple-search-select',
  component: AsyncMultipleSearchSelect,
  tags: ['autodocs'],
  argTypes: {
    value: { control: 'object' },
    options: { control: 'object' },
    loading: { control: 'boolean' },
    placeholder: { control: 'text' },
    disabled: { control: 'boolean' },
    emptyMessage: { control: 'text' },
    errorMessage: { control: 'text' },
    debounce: { control: { type: 'number', min: 0, step: 100 } },
    valueChange: { action: 'valueChange' },
    searchChange: { action: 'searchChange' },
  },
  args: {
    value: [],
    options: fewOptions,
    loading: false,
    placeholder: 'Select tags...',
    disabled: false,
    emptyMessage: 'No results',
    errorMessage: null,
    debounce: 300,
  },
  parameters: {
    aurora: {
      category: 'form',
      when: 'Many-to-many relationship picker with server-side search over a large catalog (>500 options). Runtime target of YAML `widget.type: async-multiple-search-select`.',
      whenNot:
        'For 20–500 options use `<au-multiple-search-select>` (sync, all preloaded). For single-pick use `<au-async-search-select>`.',
    },
  },
};

export default meta;

export const Default: Story = {};

export const Loading: Story = {
  args: {
    loading: true,
    options: [],
  },
};

export const Empty: Story = {
  args: {
    options: [],
    emptyMessage: 'No results matched your search',
  },
};

export const WithPreselected: Story = {
  args: {
    value: ['t1', 't2'],
    options: fewOptions,
  },
};

export const LongList: Story = {
  args: {
    options: longOptions,
    placeholder: 'Search options...',
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
    value: ['t1'],
    options: fewOptions,
  },
};
