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

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

const jsonSchema:IJsonSchema = {
  type: 'string',
  format: 'password',
  pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
  errorMessage: 'this is a custom error'
}

const Template: Story<PasswordInputProps> = (args) => {
  const [{ value },updateArgs] = useArgs()

  const handleChange = (value: string ) => {
    updateArgs({ value })
  }

  return (
    <PasswordInput 
      {...args}  
      value={value}  
      onChange={handleChange} 
    />
  )
}

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


