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

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

import type { MultiSelectFieldProps } from './MultiSelectField';
import { MultiSelectField } from './MultiSelectField';

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: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
  {
    title: 'Section 1',
    options: [
      { label: 'Option 3', value: '3' },
      { label: 'Option 4', value: '4' },
    ],
  },
  {
    title: 'Section 2',
    options: [
      { label: 'Option 5', value: '5' },
      { label: 'Option 6', value: '6' },
    ],
  },
];

const meta: Meta<typeof MultiSelectField> = {
  title: 'UI kit/Form/MultiSelectField',
  component: MultiSelectField,
  tags: ['autodocs'],
};

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

const BasicTemplate = (args: MultiSelectFieldProps<Item>) => (
  <div className='v2form'>
    <MultiSelectField {...args} />
  </div>
);

export const Default: Story = {
  args: {
    label: 'Label',
    options,
    ...selectors,
  },
  render: BasicTemplate,
};

export const Content: Story = {
  args: {
    label: 'Label',
    mode: 'content',
    options,
    ...selectors,
  },
  render: BasicTemplate,
};

export const Uncontrolled: Story = {
  args: {
    label: 'Label',
    defaultValue: ['1', '3'],
    defaultQuery: '3',
    options,
    onChange: selection => {
      console.log(selection);
    },
    ...selectors,
  },
  render: BasicTemplate,
};

const ControlledTemplate = (args: MultiSelectFieldProps<Item>) => {
  const [value, setValue] = React.useState<string[]>([]);
  const [query, setQuery] = React.useState('');
  const [controlledOptions, setControlledOptions] = React.useState(options);

  const handleFiltration = (filter: string) => {
    setQuery(filter);
    setControlledOptions(
      options.filter(option => {
        if ('label' in option) {
          return option.label.includes(filter);
        }
        return option.title.includes(filter);
      })
    );
  };

  const handleChange = (keys: string[]) => {
    setValue(keys);
  };

  return (
    <div className='v2form'>
      <MultiSelectField
        {...args}
        value={value}
        onChange={handleChange}
        options={controlledOptions}
        query={query}
        onQueryChange={handleFiltration}
      />
    </div>
  );
};

export const Controlled: Story = {
  args: {
    label: 'Label',
    ...selectors,
  },
  render: ControlledTemplate,
};

export const DisabledKeys: Story = {
  args: {
    label: 'Label',
    options,
    ...selectors,
    disabledValues: ['1', '3'],
    defaultValue: ['1', '3'],
  },
  render: BasicTemplate,
};

export const DisabledContent: Story = {
  args: {
    label: 'Label',
    disabled: true,
    defaultValue: ['1', '3'],
    mode: 'content',
    options,
    ...selectors,
  },
  render: BasicTemplate,
};

export const DisabledDropdown: Story = {
  args: {
    label: 'Label',
    options,
    disabled: true,
    ...selectors,
  },
  render: BasicTemplate,
};

export const WarningContent: Story = {
  args: {
    label: 'Label',
    warning: true,
    mode: 'content',
    options,
    ...selectors,
  },
  render: BasicTemplate,
};

export const WarningDropdown: Story = {
  args: {
    label: 'Label',
    options,
    warning: true,
    ...selectors,
  },
  render: BasicTemplate,
};

export const ErrorContent: Story = {
  args: {
    label: 'Label',
    error: true,
    mode: 'content',
    options,
    ...selectors,
  },
  render: BasicTemplate,
};

export const ErrorDropdown: Story = {
  args: {
    label: 'Label',
    options,
    error: true,
    ...selectors,
  },
  render: BasicTemplate,
};

export const EmptyContent: Story = {
  args: {
    label: 'Label',
    mode: 'content',
    ...selectors,
  },
  render: BasicTemplate,
};

export const EmptyDropdown: Story = {
  args: {
    label: 'Label',
    mode: 'dropdown',
    ...selectors,
  },
  render: BasicTemplate,
};

export const Placeholder: Story = {
  args: {
    label: 'Label',
    options,
    placeholder: 'Choose some apples',
    ...selectors,
  },
  render: BasicTemplate,
};

export const Loading: Story = {
  args: {
    label: 'Label',
    options,
    loading: true,
    ...selectors,
  },
  render: BasicTemplate,
};

export const Tooltip: Story = {
  args: {
    label: 'Label',
    options,
    tooltip: 'This is a tooltip for the multi-select field',
    ...selectors,
  },
  render: BasicTemplate,
};

export const LongOption: Story = {
  args: {
    label: 'Label',
    options: [
      ...options,
      {
        label:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper massa ut orci lobortis cursus. Vestibulum congue aliquam tempus. Morbi et ultrices orci, ac dignissim tortor.',
        value: '3',
      },
    ],
    ...selectors,
  },
  render: BasicTemplate,
};