import React, { useState } from 'react'

import { ComponentStory, ComponentMeta } from '@storybook/react'

import { Field } from '../components'

export default {
  title: 'Form/Field',
  component: Field,
} as ComponentMeta<typeof Field>

const TextTemplate: ComponentStory<typeof Field> = (args) => {
  const [value, setValue] = useState('')

  return (
    <>
      <Field
        {...args}
        type='text'
        label='Text Field'
        value={value}
        onChange={(e) => setValue(e)}
      />
    </>
  )
}

export const Text = TextTemplate.bind({})

const NumberTemplate: ComponentStory<typeof Field> = (args) => {
  const [value, setValue] = useState('')

  return (
    <>
      <Field
        {...args}
        type='number'
        label='Number Field'
        value={value}
        onChange={(e) => setValue(e)}
      />
    </>
  )
}

export const Number = NumberTemplate.bind({})

const PasswordTemplate: ComponentStory<typeof Field> = (args) => {
  const [value, setValue] = useState('')

  return (
    <>
      <Field
        {...args}
        type='password'
        label='Password Field'
        value={value}
        onChange={(e) => setValue(e)}
      />
    </>
  )
}

export const Password = PasswordTemplate.bind({})
