import React from 'react';
import RadioGroup from './index';
import { useArgs } from '@storybook/client-api';

export default {
  title: 'Core/Controls/RadioGroup',
  component: RadioGroup
};

const Template = args => {
  const [_, updateArgs] = useArgs();

  const handle = e => {
    updateArgs({ ...args, currentCategory: e });
  };

  return <RadioGroup {...args} handleCategoryChange={handle} />;
};

export const Simple = Template.bind({});
Simple.args = {
  list: [
    {
      name: 'Marketing',
      background: 'rgb(255, 150, 115)'
    },
    {
      name: 'Developer',
      background: 'rgb(80, 186, 190)'
    },
    {
      name: 'DPO',
      background: 'rgb(76, 116, 193)'
    }
  ],
  currentCategory: 'Marketing'
};

export const WithOneDisable = Template.bind({});
WithOneDisable.args = {
  list: [
    {
      name: 'Marketing',
      background: 'rgb(255, 150, 115)'
    },
    {
      name: 'Developer',
      background: 'rgb(80, 186, 190)'
    },
    {
      name: 'DPO',
      background: 'rgb(76, 116, 193)',
      disabled: true
    }
  ],
  currentCategory: 'Marketing'
};

export const Unique = Template.bind({});
Unique.args = {
  list: [
    {
      name: 'Marketing',
      background: 'rgb(255, 150, 115)'
    }
  ],
  currentCategory: ''
};