import { useState, useCallback } from 'react';
import { Story, Meta } from '@storybook/react';

import { SegmentedTabs } from './segmented-tabs';
import type { SegmentedTabsProps } from './segmented-tabs';

export default {
  component: SegmentedTabs,
  title: 'Deprecated/Components/SegmentedTabs',
  argTypes: {
    items: {
      description: 'Items array that will be displayed as the segmented tabs.'
    },
    buttonGroupProps: {
      description: 'Prop which be passed into the ButtonGroup component.',
      table: {
        defaultValue: {
          summary: { size: 'small' }.toString()
        }
      }
    }
  }
} as Meta;

const Template: Story<SegmentedTabsProps> = (args) => {
  const [segmentedButtons, setSegmentedButtons] = useState(args.items);

  const handleSegmentedTabClick = useCallback(
    (val) => () => {
      setSegmentedButtons(
        segmentedButtons.map((item) => ({
          ...item,
          selected: item.text === val
        }))
      );
    },
    [segmentedButtons]
  );

  return <SegmentedTabs {...args} clickHandler={handleSegmentedTabClick} />;
};

export const Primary = Template.bind({});
Primary.args = {
  items: [
    { text: 'Button1', selected: false },
    { text: 'Button2', selected: false },
    { text: 'Button3', selected: false }
  ],
  buttonGroupProps: {
    size: 'small'
  }
};