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

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

const 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
  },
];

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

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

  return <React.Fragment>
    <RadioGroup {...args} value={internalValue} onChange={handleChange} />
    <div>value: {internalValue}</div>
  </React.Fragment>;
};

export const _Radiogroup = Template.bind({});
_Radiogroup.args = {
  data,
  inline: true
};