import { action } from '@storybook/addon-actions'
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'
import { boolean, number, select, text } from '@storybook/addon-knobs'

import { BASIC } from '../_utils/taxonomy'
import { SendMessageIcon } from '../icon/sendMessageIcon'
import { Textarea } from './index'

<Meta title={`${BASIC}/Text Inputs/Text Field (Textarea)`} />

# **Text Field**

<Canvas>
  <Story name="Default">
    <Textarea
      id={text('id', 'textareaId')}
      name={text('name', 'inputName')}
      placeholder={text('placeholder', 'Some placeholder text')}
      labelledBy={text('aria label')}
      disabled={boolean('disabled', false)}
      readOnly={boolean('readOnly', false)}
      label={text('label', 'label')}
      error={text('error message', '')}
      onChange={action('changed')}
      onFocus={action('focused')}
      onBlur={action('blurred')}
      focus={boolean('focus', false)}
      required={boolean('required', false)}
      maxLength={number('maxLength')}
      autoComplete={select('autocomplete', ['on', 'off'])}
      title={text('title', 'accessibility text')}
    />
  </Story>
</Canvas>

### With icon

<Canvas>
  <Story name="withIcon">
    <Textarea
      id={text('id')}
      name={text('name', 'inputName')}
      placeholder={text('placeholder', 'Some placeholder text')}
      labelledBy={text('aria label')}
      disabled={boolean('disabled', false)}
      readOnly={boolean('readOnly', false)}
      label={text('label')}
      error={text('error message', '')}
      onChange={action('changed')}
      onFocus={action('focused')}
      onBlur={action('blurred')}
      focus={boolean('focus', false)}
      required={boolean('required', false)}
      maxLength={number('maxLength')}
      autoComplete={select('autocomplete', ['on', 'off'])}
      title={text('title', 'accessibility text')}
      buttonIcon={<SendMessageIcon />}
      buttonTitle="Button action"
      onButtonClick={() => {
        // eslint-disable-next-line no-alert
        window.alert('button clicked')
      }}
    />
  </Story>
</Canvas>

### With icon and fit to content

<Canvas>
  <Story name="withIconFitContent">
    <Textarea
      fitContent
      id={text('id')}
      defaultValue={text('Value', '')}
      name={text('name', 'inputName')}
      placeholder={text('placeholder', 'Some placeholder text')}
      labelledBy={text('aria label')}
      disabled={boolean('disabled', false)}
      readOnly={boolean('readOnly', false)}
      label={text('label')}
      error={text('error message', '')}
      onChange={action('changed')}
      onFocus={action('focused')}
      onBlur={action('blurred')}
      focus={boolean('focus', false)}
      required={boolean('required', false)}
      maxLength={number('maxLength')}
      autoComplete={select('autocomplete', ['on', 'off'])}
      title={text('title', 'accessibility text')}
      buttonIcon={<SendMessageIcon />}
      buttonTitle="Send"
      onButtonClick={() => {
        // eslint-disable-next-line no-alert
        window.alert('button clicked')
      }}
    />
  </Story>
</Canvas>

## Specifications

This component is a text area and accept icons.

## Usage

```jsx
import { Textarea } from '@blablacar/ui-library/build/textarea'

<Textarea
  id={id}
  name={inputName}
  placeholder={Some placeholder text}
  labelledBy={aria label}
  disabled={false}
  readOnly={false}
  label={label}
  error={''}
  onChange={changed}
  onFocus={focused}
  onBlur={blurred}
  focus={false}
  required={false}
  maxLength={100}
  autoComplete={off}
  title={accessibility text}
/>
```

<ArgsTable of={Textarea} />