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

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

const jsonSchema:IJsonSchema = {
  type: 'number',
  minimum: 0,
  maximum: 100,
}

const Template: Story<NumberInputProps> = (args) => {
  const [{ value },updateArgs] = useArgs()
  
  const handleChange = (value: number) => {
    updateArgs({ value })
  }
 
  return (
    <NumberInput 
      {...args}
      value={value} 
      onChange={handleChange}
    />
  )
}

export const Basic = Template.bind({})
Basic.args = { label:'Age',jsonSchema, placeholder:'Age',name:'age' }




  