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

type Story = StoryObj<MultipleSearchSelect>;

const tagOptions: Option[] = [
  { value: 't1', label: 'urgent' },
  { value: 't2', label: 'frontend' },
  { value: 't3', label: 'backend' },
  { value: 't4', label: 'design' },
  { value: 't5', label: 'documentation' },
  { value: 't6', label: 'bug' },
  { value: 't7', label: 'enhancement' },
  { value: 't8', label: 'wontfix' },
];

const meta: Meta<MultipleSearchSelect> = {
  title: '@aurora/components/multiple-search-select',
  component: MultipleSearchSelect,
  tags: ['autodocs'],
  argTypes: {
    value: {
      control: 'object',
      description: 'Array of selected option ids. Empty array means no selection.',
    },
    options: {
      control: 'object',
      description: 'Full preloaded option list. Filtering is client-side.',
    },
    placeholder: { control: 'text' },
    disabled: { control: 'boolean' },
    emptyMessage: { control: 'text' },
    errorMessage: { control: 'text' },
    valueChange: { action: 'valueChange' },
  },
  args: {
    value: [],
    options: tagOptions,
    placeholder: 'Select tags...',
    disabled: false,
    emptyMessage: 'No results',
    errorMessage: null,
  },
  parameters: {
    aurora: {
      category: 'form',
      when: 'Many-to-many relationship picker for medium-sized catalogs (20–500 options). Runtime target of YAML `widget.type: multiple-search-select`. All options preloaded.',
      whenNot:
        'For <20 options use `<hlm-select-multiple>`. For >500 options use `<au-async-multiple-search-select>`. For single-pick use `<au-search-select>`.',
    },
  },
};

export default meta;

export const Default: Story = {};

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

export const Empty: Story = {
  args: {
    options: [],
    emptyMessage: 'No tags available',
  },
};

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

export const Error: Story = {
  args: {
    value: [],
    errorMessage: 'Pick at least one tag',
  },
};
