import React from 'react'
import { Story, Meta } from '@storybook/react'
import { Checkbox, CheckboxProps } from './Checkbox'
import { Form } from '../Form/Form'

export default {
  title: 'Forms/Checkbox',
  component: Checkbox,
  argTypes: {
    value: {
      name: 'value',
      description: 'Initial value for the input',
      type: { name: 'string', required: false },
      control: { type: 'string' }
    },
    label: {
      name: 'label',
      description: 'Label for the input ',
      type: { name: 'string', required: true },
      control: { type: 'string' }
    },
    checked: {
      name: 'checked',
      description: ' Checkbox is selected',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    helpText: {
      name: 'helpText',
      description: 'Additional hint text to display',
      type: { name: 'string', required: false },
      control: { type: 'string' }
    },
    name: {
      name: 'name',
      description: 'Name of the input',
      type: { name: 'string', required: false }
    },
    disabled: {
      name: 'disabled',
      description: 'Disable the input',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    }
  }
} as Meta

const Template: Story<CheckboxProps> = (args: any) => {
  return (
    <Form
      onSubmit={(values) => {
        console.log(values)
      }}
    >
      <Checkbox {...args}></Checkbox>
    </Form>
  )
}
export const DefaultCheckbox = Template.bind({})
DefaultCheckbox.args = {
  label: 'I accept Privacy Terms',
  name: 'privacyPolicy',
  checked: true,
  onChange: (v) => alert(`onChange ${v}`)
}

export const WithHelpText = Template.bind({})
WithHelpText.args = {
  label: 'Email',
  name: 'email',
  value: 'dev@palenca.com',
  helpText: 'This field is required'
}

export const WithValidationError = Template.bind({})
WithValidationError.args = {
  label: 'Username',
  name: 'username',
  value: 'us',
  validate: (v) => v.length <= 3 && 'Please enter at least 3 characters'
}

export const Disabled = Template.bind({})
Disabled.args = {
  label: 'Customer name',
  name: 'customer',
  value: 'John Doe',
  disabled: true
}
