import React from 'react'
import { Meta } from '@storybook/react/types-6-0'
import { Story } from '@storybook/react'
import { Checkbox, CheckboxProps } from './Checkbox'
import { useArgs } from '@storybook/client-api'
import { IJsonSchema } from '../../types/IJsonSchema'

const jsonSchema:IJsonSchema = {
  type: 'boolean',
  errorMessage: 'You must be over 18'
}

export default {
  title:'Components/Checkbox',
  component: Checkbox,
  args: {}
} as Meta

const Template: Story<CheckboxProps> = (args) => {
  const [{ value }, updateArgs] = useArgs()
   
  const handleChange = (value: boolean) => {
    updateArgs({ value })
  }

  return (
    <Checkbox
      {...args} 
      value={value}
      onChange={handleChange} 
    />
  )
}

export const Basic = Template.bind({})
Basic.args = { label:'Are you over 18?', name:'checkbox',jsonSchema }