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

import {
  Chip as ChipComponent,
  Chips as ChipsComponent,
  ChipListItem,
} from './index';

const list: ChipListItem[] = [
  {id: 1, label: 'All'},
  {id: 2, label: 'First'},
  {id: 3, label: 'Second'},
  {id: 4, label: 'Third'},
  {id: 5, label: 'Other'},
  {id: 6, label: 'A long item to select'},
  {id: 7, label: 'Last item'},
];

const meta: Meta<typeof ChipComponent> = {
  title: 'HuGo/Chips',
  component: ChipComponent,
};

type Story = StoryObj<typeof ChipComponent>;

export const Chip: Story = {
  argTypes: {
    text: {control: 'text'},
    size: {control: 'radio', options: ['md', 'sm']},
    active: {control: 'boolean'},
    disabled: {control: 'boolean'},
    showCloseIcon: {control: 'boolean'},
  },
  args: {
    text: 'Text',
    size: 'md',
    active: false,
    disabled: false,
    showCloseIcon: false,
  },
};

export const ChipsWithActive: StoryObj<typeof ChipsComponent> = {
  argTypes: {
    size: {control: 'radio', options: ['md', 'sm']},
    disabled: {control: 'boolean'},
  },
  args: {
    size: 'md',
    disabled: false,
  },
  render: args => {
    const [selected, setSelected] = useState<number>(1);
    return (
      <ChipsComponent
        {...args}
        selected={selected}
        list={list}
        onItemPress={setSelected}
      />
    );
  },
};

export const ChipsWithClose: StoryObj<typeof ChipsComponent> = {
  argTypes: {
    size: {control: 'radio', options: ['md', 'sm']},
    disabled: {control: 'boolean'},
  },
  args: {
    size: 'md',
    disabled: false,
  },
  render: args => {
    const [items, setItems] = useState<ChipListItem[]>(list);

    return (
      <ChipsComponent
        {...args}
        list={items}
        showCloseIcon
        onItemRemove={id =>
          setItems(prev => prev.filter(item => item.id !== id))
        }
      />
    );
  },
};

export default meta;