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

export default {
  title:'Components/Toggle',
  component: Toggle,
  argTypes: {}
} as Meta

const Template: Story<ToggleProps> = (args) => {
  const [{ value },updateArgs] = useArgs()
  
  const handleChange = (value:boolean) => {
    updateArgs({ value })
  }
  return (
    <Toggle 
      {...args}
      onChange={handleChange}
      value={value}/>
  )
}

export const Basic = Template.bind({})
Basic.args = { sized:'lg',label:'Round Toggle' }

export const Square = Template.bind({})
Square.args = { label:'Square Toggle',sized:'lg',square:true }

export const Small = Template.bind({})
Small.args = { label:'Extra small Toggle',sized:'xs' }

export const Red = Template.bind({})
Red.args = { label:'The red one',sized:'xs', css:'&:checked{background-color:red;}' }

