import * as React from 'react'
import { RadioButton, Props } from '.'
import { Meta, Story } from '@storybook/react'

const meta: Meta = {
  title: 'components/RadioButton',
  component: RadioButton,
  argTypes: { onChange: { action: 'changed' } },
}

const Template: Story<Props> = ({ ref, label, ...args }) => {
  return (
    <>
      Some text
      {' '}
      <RadioButton
        {...args}
        label={label + '1'}
      />
      {' '}
      Another text
      {' '}
      <RadioButton
        {...args}
        label={label + '2'}
      />
      {' '}
      Some other text
      {' '}
      <RadioButton
        {...args}
        label={label + '3'}
      />
    </>
  )
}

export const Default = Template.bind({})
Default.args = {
  label: 'RadioButton label',
  name: 'default',
}

export const Disabled = Template.bind({})
Disabled.args = {
  label: 'RadioButton label',
  name: 'disabled',
  disabled: true,
}

export const HiddenLabel = Template.bind({})
HiddenLabel.args = {
  label: 'RadioButton label',
  name: 'hiddenLabel',
  hiddenLabel: true,
}

export const DisabledWithinFieldset: Story<Props> = ({ ref, disabled, ...args }) => (
  <fieldset
    disabled={disabled}
  >
    <RadioButton
      {...args}
    />
  </fieldset>
)
DisabledWithinFieldset.args = {
  label: 'RadioButton label',
  name: 'disabledWithinFieldset',
  disabled: true,
}


export default meta
