import { Meta, Story, Preview, Source } from '@storybook/addon-docs/blocks';
import { View, Input } from '@tedconf/monterey';
import { number, text, boolean, select } from '@storybook/addon-knobs';

<Meta title="Forms|Textarea" component={Input} />

# Textarea

## Import the Input component

<Source
  code={`
import { Input } from '@tedconf/monterey';
`}
/>

## Use the input

Pick the appropriate input for your situation.

<Story name="kitchen sink">
  <View sx={{ width: '100%', maxWidth: '50%', padding: 5 }}>
    <Input
      label="Name"
      variant={select('variant', ['onGray', 'onBlack', 'onWhite'], 'onWhite')}
      disabled={boolean('disabled', false)}
      label="Name"
      placeholder="What’s your name?"
      required
      success={text('success', 'That looks like a name to me')}
      error={text('error', 'I don’t think that’s a name')}
      pattern={text('pattern', '[A-za-z]+')}
      type="textarea"
      valid={boolean('valid', undefined)}
      invalid={boolean('invalid', undefined)}
    />
  </View>
</Story>

<Story name="onWhite">
  <View sx={{ padding: 5, backgroundColor: 'white' }}>
    <Input
      variant="onWhite"
      disabled={boolean('disabled', false)}
      label="Name"
      type="textarea"
      placeholder="What’s your name?"
      required
      pattern={text('pattern', '[A-za-z]+')}
      valid={boolean('valid', undefined)}
      invalid={boolean('invalid', undefined)}
    />
  </View>
</Story>

<Story name="onBlack">
  <View sx={{ padding: 5, backgroundColor: 'black' }}>
    <Input
      variant="onBlack"
      type="textarea"
      disabled={boolean('disabled', false)}
      label="Name"
      placeholder="What’s your name?"
      required
      pattern={text('pattern', '[A-za-z]+')}
      valid={boolean('valid', undefined)}
      invalid={boolean('invalid', undefined)}
    />
  </View>
</Story>

<Story name="onGray">
  <View sx={{ padding: 5, backgroundColor: 'gray.1' }}>
    <Input
      variant="onGray"
      disabled={boolean('disabled', false)}
      label="Name"
      placeholder="What’s your name?"
      type="textarea"
      required
      pattern={text('pattern', '[A-za-z]+')}
    />
  </View>
</Story>