/* eslint-disable react-hooks/rules-of-hooks */
import React, {useState} from 'react';
import {Meta, StoryObj} from '@storybook/react';

import {InputDropdown} from './index';
import {InputSelectOption, SingleSelectProps} from '../InputSelect/interfaces';

const OPTIONS: InputSelectOption<number>[] = [
  {id: 1, label: 'Option 1', description: 'Description for option 1'},
  {id: 2, label: 'Option 2', description: 'Description for option 2'},
  {id: 3, label: 'Option 3', description: 'Description for option 3'},
  {id: 4, label: 'Option 4', description: 'Description for option 4'},
  {id: 5, label: 'Option 5', description: 'Description for option 5'},
];

type StoryBaseProps = {
  showDescription: boolean;
};

type InputDropdownStoryProps = SingleSelectProps<number> & StoryBaseProps;

const meta: Meta<InputDropdownStoryProps> = {
  title: 'HuGo/Inputs/InputDropdown',
  component: InputDropdown,
  argTypes: {
    label: {type: 'string'},
    placeholder: {type: 'string'},
    helper: {type: 'string'},
    disabled: {type: 'boolean'},
    showDescription: {type: 'boolean'},
    filterable: {type: 'boolean'},
    isError: {type: 'boolean'},
    isSuccess: {type: 'boolean'},
    searchPlaceholder: {type: 'string'},
    size: {
      control: 'select',
      options: ['sm', 'lg'],
      defaultValue: 'lg',
    },
  },
};

export const InputDropdownComponent: StoryObj<InputDropdownStoryProps> = {
  args: {
    label: 'Label',
    placeholder: 'Select an option',
    helper: 'Helper text',
    disabled: false,
    showDescription: true,
    filterable: false,
    isError: false,
    isSuccess: false,
    searchPlaceholder: 'Search...',
    size: 'lg',
  },
  render: ({showDescription, ...args}: InputDropdownStoryProps) => {
    const [value, setValue] = useState<number | undefined>();

    return (
      <InputDropdown
        {...args}
        value={value}
        onChange={setValue}
        options={
          showDescription
            ? OPTIONS
            : OPTIONS.map(option => ({id: option.id, label: option.label}))
        }
      />
    );
  },
};

export const SmallInputDropdown: StoryObj<InputDropdownStoryProps> = {
  args: {
    ...InputDropdownComponent.args,
    size: 'sm',
    placeholder: 'Small dropdown',
  },
  render: InputDropdownComponent.render,
};

export const InputDropdownFilterable: StoryObj<InputDropdownStoryProps> = {
  args: {
    ...InputDropdownComponent.args,
    filterable: true,
    searchPlaceholder: 'Search options...',
    placeholder: 'Filterable dropdown',
  },
  render: InputDropdownComponent.render,
};

export const InputDropdownWithError: StoryObj<InputDropdownStoryProps> = {
  args: {
    ...InputDropdownComponent.args,
    isError: true,
    helper: 'This field is required',
  },
  render: InputDropdownComponent.render,
};

export const InputDropdownDisabled: StoryObj<InputDropdownStoryProps> = {
  args: {
    ...InputDropdownComponent.args,
    disabled: true,
    value: 1,
  },
  render: ({showDescription, ...args}: InputDropdownStoryProps) => {
    return (
      <InputDropdown
        {...args}
        value={1}
        onChange={undefined}
        options={
          showDescription
            ? OPTIONS
            : OPTIONS.map(option => ({id: option.id, label: option.label}))
        }
      />
    );
  },
};

export default meta;
