import React, { useState } from 'react'
import { Meta } from '@storybook/react/types-6-0'
import { Story } from '@storybook/react'
import { InputWrapper,InputWrapperProps } from './InputWrapper'
import styled from 'styled-components'
import { IJsonSchema } from '../../types/IJsonSchema'

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

const jsonSchema:IJsonSchema= {
  type: 'number',
  minimum: 0,
  maximum: 100,
  errorMessage: 'this is a custom error'
}

const Template: Story<InputWrapperProps> = (args) => {
  const [value,setValue] = useState(0)

  const handleChange = (event:React.ChangeEvent<HTMLInputElement>) => {
    setValue(parseInt(event.target.value))
  }

  return (
    <InputWrapper value={value} {...args}>
      <Input type="number" name='age' value={value} onChange={handleChange} />
    </InputWrapper> 
  )
}

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

const Input = styled.input`
  border-radius: 4px;
  height: 30px;
  outline: none;
  outline-width: 0;
  border: none;
    font-size: 1rem;
`