import React from 'react'
import { Meta, Story } from '@storybook/react'

import TextInput, { TextInputProps } from './TextInput.component'

const meta: Meta = {
  title: 'Backlog/TextInput',
  component: TextInput,
  parameters: {
    controls: { expanded: true },
    design: {
      type: 'figma'
    }
  }
}

export default meta

interface Props extends TextInputProps {
  value<T>(value: any): [any, any]
  disabled: any
  darkMode: boolean
}

const StoryTextInput: Story<Props> = args => {
  const [text1, setText1] = React.useState<string>(args.value)

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

  return (
    <>
      <div>
        <TextInput
          type="email"
          value={text1}
          handleChange={handleChange}
          label="Email"
          placeholder="veronica@example.com"
          // helperText="This is a hint text to help the user."
          disabled={args.disabled}
        />
        <div className="mb-4" />
        <TextInput
          type="text"
          value={text1}
          handleChange={handleChange}
          label="Email"
          placeholder="veronica@example.com"
          error="This is an error message."
          disabled={args.disabled}
        />
      </div>
      <div>
        <TextInput
          type="text"
          value={text1}
          handleChange={handleChange}
          label="Website"
          placeholder="example.com"
          leadingText="https://"
          // helperText="This is a hint text to help the user."
          disabled={args.disabled}
        />
        <div className="mb-4" />
        <TextInput
          type="text"
          value={text1}
          handleChange={handleChange}
          label="Website"
          placeholder="example.com"
          leadingText="https://"
          error="This is an error message."
          disabled={args.disabled}
        />
      </div>
    </>
  )
}

export const Default = StoryTextInput.bind({})

Default.args = {
  darkMode: false,
  disabled: false,
  value: 'teste'
}

Default.parameters = {
  controls: {
    exclude: [
      'value',
      'type',
      'handleChange',
      'label',
      'leadingText',
      'placeholder',
      'error',
      'helperText',
      'LeadingIcon',
      'TrailingIcon'
    ]
  }
}