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

import { RadioButtons } from './radio-buttons';
import type { RadioButtonsProps } from './radio-buttons';

export default {
  component: RadioButtons,
  title: 'Deprecated/Components/RadioButtons',
  argTypes: {
    items: {
      description: 'Items array that will be displayed as the radio options. Name should be unique.'
    }
  }
} as Meta;

const Template: Story<RadioButtonsProps> = args => {
  const [radioButtons, setRadioButtons] = useState(args.items);
  const radioClickHandler = (e: unknown, val: string) => {
    setRadioButtons(
      radioButtons.map(button => ({
        ...button,
        selected: button.text === val
      }))
    );
  };

  return <RadioButtons items={radioButtons} clickHandler={radioClickHandler} />;
};

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