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

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

const jsonSchema:IJsonSchema = {
  type: 'percentage',
  minimum: 0,
  maximum: 1,
  errorMessage:'Value needs to be between 0 and 100'
}

const BasicTemplate: Story<PercentageInputProps> = (args) => {
  const [{ value },updateArgs] = useArgs()
  useEffect(()=> updateArgs({ value:0.912 }) ,[])
  
  const handleChange = (value: number|null) => {
    updateArgs({ value:value||'' })
  }

  return (
    <PercentageInput 
      {...args}
      value={value||''}
      onChange={handleChange}
    />
  )
}

const PlaceholderTemplate: Story<PercentageInputProps> = (args) => {
  const [{ value },updateArgs] = useArgs()
  useEffect(()=> updateArgs({ value:null }) ,[])
  
  const handleChange = (value: number|null) => {
    updateArgs({ value:value||'' })
  }

  return (
    <PercentageInput 
      {...args}
      value={value||''}
      onChange={handleChange}
    />
  )
}


export const Basic = BasicTemplate.bind({})
Basic.args = {  label:'Vat Percentage',name:'vatPercentage',jsonSchema }

export const Placeholder = PlaceholderTemplate.bind({})
Placeholder.args = {  label:'Vat Percentage',placeholder:'Vat Percentage',name:'vatPercentage',jsonSchema }