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

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

const Template: Story<Props> = ({ ref, ...args }) => {
  return (
    <>
      Some text
      {' '}
      <Checkbox
        {...args}
      />
      {' '}
      Another text
    </>
  )
}

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

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

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

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

export default meta
