import React from 'react';
import { Meta, StoryFn } from "@storybook/react-webpack5";
import { useArgs, useCallback, useState } from "storybook/preview-api";
import ListGroup from '@molecules/ListGroup/ListGroup';
import { ListGroupProps } from '@molecules/ListGroup/ListGroup';

export default {
  title: 'molecules/List Group',
  component: ListGroup,
  argTypes: {},
} as Meta<typeof ListGroup>;

const Template: StoryFn<ListGroupProps> = ({value, onChange, ...args}) => {
  const [_, updateArgs] = useArgs();
  const [internalValue, setInternalValue] = useState('');

  const handleChange = useCallback((newValue: string) => {
    setInternalValue(newValue);
    updateArgs({value: newValue});
  }, []);

  return <ListGroup {...args} value={internalValue} onChange={handleChange} />;
};

export const Listgroup = Template.bind({});
Listgroup.args = {
  data: [
    {
      id: '1',
      name: 'item 1'
    },
    {
      id: '2',
      name: 'item 2'
    },
    {
      id: '3',
      name: 'item 3'
    },
    {
      id: '4',
      name: 'item 4'
    },
    {
      id: '5',
      name: 'item 5',
      disabled: true
    },
  ],
  action: true,
  flush: false,
}