import { useState } from 'react';
import { Story, Meta } from '@storybook/react';
import type { DropDownMenuProps } from '../dropdown-menu';

import { ButtonsWithMenu } from './buttons-with-menu';
import type { ButtonsWithMenuProps } from './types';
import containerButtonsData from './__mocks__/mockButtonsWithMenu';

export default {
  component: ButtonsWithMenu,
  title: 'Buttons/Buttons',
  argTypes: {
    size: {
      description:
        'Set the size of the buttons in group (`small` is equivalent to the dense button styling).',
      options: ['small', 'medium', 'large'],
      control: {
        type: 'select'
      },
      defaultValue: {
        summary: 'medium'
      }
    },
    countOfVisible: {
      description: 'Number of buttons to display outside the menu.'
    },
    listItems: {
      description: 'Buttons array to display.'
    },
    handleDelete: {
      description: 'Callback which will be fired on delete icon click inside the menu.'
    },
    onSortEnd: {
      description: 'Callback which will be fired on sort end.'
    },
    clickHandler: {
      description: 'Callback which will be fired on button or menu item click.'
    },
    buttonGroupProps: {
      description: 'Props to be supplied directly into the ButtonGroup component.'
    }
  }
} as Meta;

const Template: Story<ButtonsWithMenuProps> = args => {
  const [buttons, setButtons] = useState(args.listItems);
  const handleButtonClick: NonNullable<DropDownMenuProps['handleClick']> = name => () => {
    setButtons(
      buttons.map(button => ({
        ...button,
        selected: name === button.name
      }))
    );
  };
  return <ButtonsWithMenu {...args} clickHandler={handleButtonClick} listItems={buttons} />;
};

export const Tabs = Template.bind({});
Tabs.args = {
  size: 'medium',
  listItems: containerButtonsData.slice(3),
  countOfVisible: 3,
  handleDelete: () => () => alert('Will delete'),
  onSortEnd: () => alert('Will sort')
};