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

type Story = StoryObj<SearchSelect>;

const fewOptions: Option[] = [
  { value: 'c1', label: 'Acme Corporation' },
  { value: 'c2', label: 'Globex Industries' },
  { value: 'c3', label: 'Initech Technologies' },
  { value: 'c4', label: 'Umbrella Labs' },
];

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

const meta: Meta<SearchSelect> = {
  title: '@aurora/components/search-select',
  component: SearchSelect,
  tags: ['autodocs'],
  argTypes: {
    value: {
      control: 'text',
      description: 'Currently selected option value (id). `null` means no selection.',
    },
    options: {
      control: 'object',
      description:
        'Full preloaded option list. Filtering happens client-side via Spartan combobox default filter.',
    },
    placeholder: { control: 'text' },
    disabled: { control: 'boolean' },
    emptyMessage: {
      control: 'text',
      description:
        'Shown inside the popover when the user query filters out every option. Should be already translated by the host (e.g. `t("Aurora.NoResults")`).',
    },
    errorMessage: {
      control: 'text',
      description:
        'Optional error message rendered below the combobox. Host passes the already-translated string.',
    },
    valueChange: { action: 'valueChange' },
  },
  args: {
    value: null,
    options: fewOptions,
    placeholder: 'Select client...',
    disabled: false,
    emptyMessage: 'No results',
    errorMessage: null,
  },
  parameters: {
    aurora: {
      category: 'form',
      when: 'Many-to-one relationship picker for medium-sized catalogs (20–500 options). Runtime target of the YAML `widget.type: search-select`. All options preloaded by the resolver — no server roundtrip on each keystroke.',
      whenNot:
        'For <20 options use `<hlm-select>` (no need for filter UX). For >500 use `<au-async-search-select>` (server-side search). For multi-select use `<au-multiple-search-select>`.',
    },
  },
};

export default meta;

export const Default: Story = {};

export const WithPreselected: Story = {
  name: 'With preselected value',
  args: {
    value: 'c2',
    options: fewOptions,
  },
  parameters: {
    docs: {
      description: {
        story:
          'Component initializes with a value already set (typical edit mode). The trigger shows the label of the pre-selected option via `itemToString`.',
      },
    },
  },
};

export const MediumList: Story = {
  name: 'Medium option list (80 items)',
  args: {
    options: mediumOptions,
    placeholder: 'Search user...',
  },
  parameters: {
    docs: {
      description: {
        story:
          'Eighty options to validate that client-side filter behaves correctly while the user types. The popover scrolls and keyboard navigation (Arrow Up/Down, Home/End) works inside `hlm-combobox-list`.',
      },
    },
  },
};

export const Empty: Story = {
  args: {
    options: [],
    emptyMessage: 'No results matched your search',
  },
  parameters: {
    docs: {
      description: {
        story:
          'Empty list scenario — also fired when the user types a query that filters out all options.',
      },
    },
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
    placeholder: 'Disabled',
    options: fewOptions,
  },
};

export const Error: Story = {
  name: 'With error message',
  args: {
    value: null,
    errorMessage: 'Select a client to continue',
  },
};
