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

import type { MultiSelectSelectors } from './hooks/useMultiSelectState';
import { MultiSelect } from './MultiSelect';

type Option = {
  label: string;
  value: string;
};

type Section = {
  title: string;
  options: Option[];
};

type Item = Option | Section;

const selectors: MultiSelectSelectors<Item> = {
  getOptionValue: option => ('value' in option ? option.value : option.title),
  getOptionLabel: option => ('label' in option ? option.label : option.title),
  renderLabel: option => ('label' in option ? option.label : undefined),
  getGroupOptions: section => ('options' in section ? section.options : undefined),
};

const options: Item[] = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Cherry', value: 'cherry' },
  {
    title: 'Citrus Fruits',
    options: [
      { label: 'Orange', value: 'orange' },
      { label: 'Lemon', value: 'lemon' },
      { label: 'Lime', value: 'lime' },
    ],
  },
  {
    title: 'Berries',
    options: [
      { label: 'Strawberry', value: 'strawberry' },
      { label: 'Blueberry', value: 'blueberry' },
      { label: 'Raspberry', value: 'raspberry' },
    ],
  },
];

const meta: Meta<typeof MultiSelect> = {
  title: 'UI kit/Form/Inputs/MultiSelect',
  component: MultiSelect,
  tags: ['autodocs'],
  argTypes: {
    mode: {
      control: { type: 'radio' },
      options: ['dropdown', 'content'],
    },
    width: {
      control: { type: 'radio' },
      options: ['sm', 'md', 'lg'],
    },
    label: {
      control: { type: 'text' },
      description: 'Label shown on small screens in dialog mode',
    },
  },
};

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

export const Default: Story = {
  args: {
    label: 'Select fruits',
    placeholder: 'Choose fruits...',
    options,
    ...selectors,
  },
};

export const DropdownMode: Story = {
  args: {
    label: 'Select fruits',
    mode: 'dropdown',
    placeholder: 'Choose fruits...',
    options,
    ...selectors,
  },
};

export const ContentMode: Story = {
  args: {
    label: 'Select fruits',
    mode: 'content',
    placeholder: 'Choose fruits...',
    options,
    ...selectors,
  },
};

export const WithDefaultValue: Story = {
  args: {
    label: 'Select fruits',
    placeholder: 'Choose fruits...',
    defaultValue: ['apple', 'orange'],
    options,
    ...selectors,
  },
};

export const Error: Story = {
  args: {
    label: 'Select fruits',
    placeholder: 'Choose fruits...',
    error: true,
    options,
    ...selectors,
  },
};

export const Warning: Story = {
  args: {
    label: 'Select fruits',
    placeholder: 'Choose fruits...',
    warning: true,
    options,
    ...selectors,
  },
};

export const Disabled: Story = {
  args: {
    label: 'Select fruits',
    placeholder: 'Choose fruits...',
    disabled: true,
    defaultValue: ['apple', 'banana'],
    options,
    ...selectors,
  },
};

export const DisabledValues: Story = {
  args: {
    label: 'Select fruits',
    placeholder: 'Choose fruits...',
    disabledValues: ['banana', 'orange'],
    defaultValue: ['apple', 'banana'],
    options,
    ...selectors,
  },
};

export const HideSelectAll: Story = {
  args: {
    label: 'Select fruits',
    placeholder: 'Choose fruits...',
    hideSelectAll: true,
    options,
    ...selectors,
  },
};

export const EmptyOptions: Story = {
  args: {
    label: 'Select fruits',
    placeholder: 'No options available...',
    options: [],
    ...selectors,
  },
};

export const ContentModeWithSections: Story = {
  args: {
    label: 'Select fruits',
    mode: 'content',
    placeholder: 'Choose fruits...',
    defaultValue: ['apple', 'orange', 'strawberry'],
    options,
    ...selectors,
  },
};