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

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

const OPTIONS: InputSelectOption[] = [
  {id: 1, label: 'Option 1', AvatarProps: {Icon: IconUser}},
  {id: 2, label: 'Option 2', AvatarProps: {Icon: IconUser}},
  {id: 3, label: 'Option 3', AvatarProps: {Icon: IconUser}},
  {id: 4, label: 'Option 4', AvatarProps: {Icon: IconUser}},
  {id: 5, label: 'Option 5', AvatarProps: {Icon: IconUser}},
];

// Common story props without the multiselect-specific ones
type StoryBaseProps = {
  showAvatar: boolean;
};

// Single select story type
type SingleSelectStoryProps = SingleSelectProps<number> & StoryBaseProps;

// Multi select story type
type MultiSelectStoryProps = MultiSelectProps<number> & StoryBaseProps;

const meta: Meta<SingleSelectStoryProps | MultiSelectStoryProps> = {
  title: 'HuGo/Inputs/InputSelect',
  component: InputSelect,
  argTypes: {
    label: {type: 'string'},
    placeholder: {type: 'string'},
    helper: {type: 'string'},
    disabled: {type: 'boolean'},
    showRadioButtonItem: {type: 'boolean'},
    showAvatar: {type: 'boolean'},
    showAvatarInCollapsedInput: {type: 'boolean'},
    filterable: {type: 'boolean'},
    isError: {type: 'boolean'},
    isSuccess: {type: 'boolean'},
    withCreateButton: {type: 'boolean'},
    withDivider: {type: 'boolean'},
    size: {
      control: 'select',
      options: ['sm', 'lg'],
      defaultValue: 'lg',
    },
  },
};

export const InputSelectComponent: StoryObj<SingleSelectStoryProps> = {
  args: {
    label: 'Label',
    placeholder: 'Placeholder',
    helper: 'Helper',
    disabled: false,
    showRadioButtonItem: false,
    showAvatar: false,
    showAvatarInCollapsedInput: true,
    filterable: false,
    isError: false,
    isSuccess: false,
    withCreateButton: true,
    withDivider: true,
    size: 'lg',
  },
  render: ({showAvatar, ...args}: SingleSelectStoryProps) => {
    const [value, setValue] = useState<number>();

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

export const SmallInputSelect: StoryObj<SingleSelectStoryProps> = {
  args: {
    ...InputSelectComponent.args,
    size: 'sm',
    placeholder: 'Small select input',
  },
  render: InputSelectComponent.render,
};

/** Avatars in the menu list only; collapsed field shows label text (Time Off policy selector pattern). */
export const InputSelectAvatarMenuOnly: StoryObj<SingleSelectStoryProps> = {
  args: {
    ...InputSelectComponent.args,
    showAvatar: true,
    showAvatarInCollapsedInput: false,
    placeholder: 'Select (icons in menu, text in field)',
  },
  render: InputSelectComponent.render,
};

export const InputSelectMultiple: StoryObj<MultiSelectStoryProps> = {
  args: {
    label: 'Label',
    placeholder: 'Placeholder',
    helper: 'Helper',
    disabled: false,
    showRadioButtonItem: false,
    showAvatar: false,
    showAvatarInCollapsedInput: true,
    filterable: true,
    isError: false,
    isSuccess: false,
    multipleSelect: true,
    withCreateButton: true,
    withDivider: true,
    size: 'lg',
  },
  render: ({showAvatar, ...args}: MultiSelectStoryProps) => {
    const [values, setValues] = useState<number[]>([]);
    return (
      <InputSelect<number>
        {...args}
        value={values}
        onChange={setValues}
        multipleSelect
        options={
          showAvatar
            ? OPTIONS
            : OPTIONS.map(option => ({id: option.id, label: option.label}))
        }
      />
    );
  },
};

export const SmallInputSelectMultiple: StoryObj<MultiSelectStoryProps> = {
  args: {
    ...InputSelectMultiple.args,
    size: 'sm',
    placeholder: 'Small multiple select',
  },
  render: InputSelectMultiple.render,
};

export default meta;
