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

import { SelectAddField } from './SelectAddField';

const { Option } = SelectAddField;

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

export default meta;
type Story = StoryObj<typeof SelectAddField>;

type BasicOptions = Array<{
  value: string;
  label: string;
}>;

const basicOptions: BasicOptions = [
  { value: '1', label: 'One' },
  { value: '2', label: 'Two' },
  { value: '3', label: 'Three' },
];

export const Default: Story = {
  args: {
    label: 'Select item:',
    placeholder: 'Choose value...',
    options: basicOptions,
    getOptionValue: (option: { value: string }) => option.value,
    getOptionLabel: (option: { label: string }) => option.label,
  },
};

type NestedStory = StoryObj<typeof SelectAddField<{ value: string; label: string }>>;
const NestedStory = (args: NestedStory['args']) => {
  return (
    <SelectAddField
      {...args}
      label='Select item:'
      value='banana'
      options={[
        {
          value: 'all',
          label: 'Flora',
        },
        {
          label: 'Fruits',
          options: [
            { value: 'apple', label: 'Apple' },
            { value: 'banana', label: 'Banana' },
            { value: 'orange', label: 'Orange' },
          ],
        },
        {
          label: 'Vegetables',
          options: [
            { value: 'carrot', label: 'Carrot' },
            { value: 'cucumber', label: 'Cucumber' },
            { value: 'tomato', label: 'Tomato' },
          ],
        },
      ]}
      getOptionValue={option => option.value ?? option.label}
      getOptionLabel={option => option.label}
      getGroupOptions={option => option.options}
      renderOption={option => <Option>{option.label}</Option>}
    />
  );
};

export const OptionsGroups: NestedStory = {
  args: {
    label: 'Select item:',
    placeholder: 'Choose value...',
  },
  render: NestedStory,
};

export const OptionsAsArray: Story = {
  args: {
    label: 'Select item:',
    placeholder: 'Choose value...',
    options: basicOptions,
    getOptionValue: (option: { value: string }) => option.value,
    getOptionLabel: (option: { label: string }) => option.label,
  },
};

export const Justify: Story = {
  args: {
    label: 'Select item:',
    justify: true,
    options: basicOptions,
    getOptionValue: (option: { value: string }) => option.value,
    getOptionLabel: (option: { label: string }) => option.label,
  },
};