import React from 'react'
import { Story, Meta } from '@storybook/react'
import { TextField, TextFieldProps } from './TextField'
import { Form } from '../Form/Form'
import { Button } from '../Button/Button'
import { Icon } from '../Icon/Icon'
import {
  ClipboardIcon,
} from '@heroicons/react/solid'

export default {
  title: 'Forms/TextField',
  component: TextField,
  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' }
    },
    placeholder: {
      name: 'placeholder',
      description: 'Hint text to display',
      type: { name: 'string', required: false },
      control: { type: 'string' }
    },
    helpText: {
      name: 'helpText',
      description: 'Additional hint text to display',
      type: { name: 'string', required: false },
      control: { type: 'string' }
    },
    suffix: {
      name: 'suffix',
      description: 'Input suffix text or component',
      type: { name: 'string', required: false },
      control: { type: 'string' }
    },
    inputMode: {
      name: 'inputMode',
      description: 'Choose the keyboard that should be used on mobile devices',
      type: { name: 'string', required: false },
      control: {
        type: 'select',
        options: [
          'none',
          'text',
          'email',
          'decimal',
          'numeric',
          'tel',
          'search'
        ]
      }
    },
    type: {
      name: 'type',
      description: 'Determine type of input',
      type: { name: 'string', required: false },
      control: {
        type: 'select',
        options: ['text', 'email', 'number', 'password', 'search', 'tel']
      }
    },
    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<TextFieldProps> = (args: any) => {
  return (
    <Form
      onSubmit={(values) => {
        console.log(values)
      }}
    >
      <TextField {...args}></TextField>
    </Form>
  )
}
export const DefaultTextField = Template.bind({})
DefaultTextField.args = {
  label: 'Full Name',
  name: 'fullname',
  type: 'text',
  value: 'Jane Doe'
}

export const NumberField = Template.bind({})
NumberField.args = {
  label: 'Quantity',
  name: 'quantity',
  type: 'number'
}

export const WithHelpText = Template.bind({})
WithHelpText.args = {
  label: 'Email',
  name: 'email',
  type: 'text',
  value: 'dev@palenca.com',
  helpText: "We'll only use this for spam."
}

export const WithValidationError = Template.bind({})
WithValidationError.args = {
  label: 'Username',
  name: 'username',
  type: 'text',
  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',
  type: 'text',
  value: 'John Doe',
  disabled: true
}


export const Suffix = Template.bind({})
Suffix.args = {
  label: 'Email',
  name: 'email',
  type: 'text',
  value: 'dev@palenca.com',
  suffix: <Button plain onClick={() => alert('Clicked')}> <Icon color="subdued" size='xxs' source={<ClipboardIcon />} />
  </Button>
}