import { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { TextareaInput } from './TextareaInput';
import { Box } from '../Box/Box';

<Meta
  title="Components/TextareaInput/Overview"
  component={TextareaInput}
  parameters={{
    controls: { hideNoControlsWarning: true },
  }}
/>

# TextareaInput

Use TextareaInput to render a multi-line text input.

<Canvas isExpanded>
  <TextareaInput id="demo" label="Multi Line Text Input" />
</Canvas>

## Props

<ArgsTable of={TextareaInput} />

## Examples

All that is required to render a basic version of the TextareaInput is a unique `id`, `label`, `value`, and an onchange event handler passed to the `onChange` prop.
The input is vertically resizable by default.

<Canvas>
  <Story name="Default">
    {() => {
      const [value, setValue] = useState('');
      return (
        <TextareaInput
          id="default"
          value={value}
          label="TextareaInput"
          onChange={event => setValue(event.target.value)}
        />
      );
    }}
  </Story>
</Canvas>

## Required

Use the `isRequired` prop to set the `required` and `aria-required` on the underlying input element.

<Canvas>
  <Story name="Required">
    {() => {
      const [value, setValue] = useState('');
      return (
        <TextareaInput
          id="required"
          value={value}
          label="Required TextareaInput"
          onChange={event => setValue(event.target.value)}
          isRequired
        />
      );
    }}
  </Story>
</Canvas>

You can remove or customize the required indicator using the `requiredIndicator` prop.

<Canvas>
  <Story name="Custom Required Indicator">
    {() => {
      const [value, setValue] = useState('');
      const [value2, setValue2] = useState('');
      return (
        <Box gap="md">
          <TextareaInput
            id="requiredWithoutIndicator"
            label="Required Without Indicator"
            value={value}
            onChange={event => setValue(event.target.value)}
            isRequired
            requiredIndicator={null}
          />
          <TextareaInput
            id="requiredCustomIndicator"
            label="Required Custom Indicator"
            value={value2}
            onChange={event => setValue2(event.target.value)}
            isRequired
            requiredIndicator=" (required)"
          />
        </Box>
      );
    }}
  </Story>
</Canvas>

## Help Text

Use the `helpText` prop to add clarifying text beneath the input label.

<Canvas>
  <Story name="Help Text">
    {() => {
      const [value, setValue] = useState('');
      return (
        <TextareaInput
          id="helpText"
          value={value}
          label="Design Notes"
          helpText="Add any design requirements or aesthetic choices that the solar system designer should know"
          onChange={event => setValue(event.target.value)}
        />
      );
    }}
  </Story>
</Canvas>

## Resize

The `resize` prop accepts `horizontal`, `vertical`, `both` or `none` to control the users ability to resize the input.

<Canvas>
  <Story name="Resize">
    {() => {
      const [value1, setValue1] = useState('');
      const [value2, setValue2] = useState('');
      return (
        <Box gap="md">
          <TextareaInput
            id="resizeBoth"
            value={value1}
            label="Resize Me Vertically and Horizontally"
            onChange={event => setValue1(event.target.value)}
            resize="both"
          />
          <TextareaInput
            id="resizeNone"
            value={value2}
            label="Can't resize me"
            onChange={event => setValue2(event.target.value)}
            resize="none"
          />
        </Box>
      );
    }}
  </Story>
</Canvas>

## Sizes

Set the `size` of the input to `sm`, `md` or `lg`. The `size` prop is also a `ResponsiveProp`, so it can be sized differently at each [breakpoint](?path=/docs/design-tokens-design-tokens--page#breakpoints) by passing an object.

<Canvas>
  <Story name="Sizes">
    {() => {
      const [valueSm, setValueSm] = useState('');
      const [valueMd, setValueMd] = useState('');
      const [valueLg, setValueLg] = useState('');
      const [valueResponsive, setValueResponsive] = useState('');
      return (
        <Box gap="md">
          <TextareaInput
            id="Small"
            value={valueSm}
            label="Small"
            onChange={event => setValueSm(event.target.value)}
            size="sm"
          />
          <TextareaInput
            id="Medium"
            value={valueMd}
            label="Medium"
            onChange={event => setValueMd(event.target.value)}
            size="md"
          />
          <TextareaInput
            id="Large"
            value={valueLg}
            label="Large"
            onChange={event => setValueLg(event.target.value)}
            size="lg"
          />
          <TextareaInput
            id="Responsive"
            value={valueResponsive}
            label="Responsive"
            onChange={event => setValueResponsive(event.target.value)}
            size={{ base: 'sm', tablet: 'md', desktop: 'lg', hd: 'sm' }}
          />
        </Box>
      );
    }}
  </Story>
</Canvas>

## Placeholder

Use the `placeholder` prop to add a custom placeholder.

<Canvas>
  <Story name="Placeholder">
    {() => {
      const [value, setValue] = useState('');
      return (
        <TextareaInput
          id="placeholder"
          value={value}
          label="Placholder TextareaInput"
          onChange={event => setValue(event.target.value)}
          placeholder="Custom placeholder..."
        />
      );
    }}
  </Story>
</Canvas>

## Autofocus

Use the `autoFocus` prop to autofocus the input.

<Canvas>
  <Story name="Autofocus">
    {() => {
      const [value, setValue] = useState('');
      return (
        <TextareaInput
          id="autofocus"
          value={value}
          label="Autofocus TextareaInput"
          onChange={event => setValue(event.target.value)}
          autoFocus
        />
      );
    }}
  </Story>
</Canvas>

## Hidden Label

Use the `hideLabel` prop to not render the label.

<Canvas>
  <Story name="Hidden Label">
    {() => {
      const [value, setValue] = useState('');
      return (
        <TextareaInput
          id="hiddenLabel"
          value={value}
          label="Hidden TextareaInput"
          onChange={event => setValue(event.target.value)}
          hideLabel
        />
      );
    }}
  </Story>
</Canvas>

## Disabled

Use the `isDisabled` prop to mark the input as disabled.

<Canvas>
  <Story name="Disabled">
    {() => {
      const [value, setValue] = useState('');
      return (
        <TextareaInput
          id="disabled"
          value={value}
          label="Disabled TextareaInput"
          onChange={event => setValue(event.target.value)}
          isDisabled
        />
      );
    }}
  </Story>
</Canvas>

## Disabled with Value

Use the `isDisabled` prop to mark the input as disabled. Disabled inputs can have values that are either preset, or entered by users.

<Canvas>
  <Story name="Disabled with Value">
    {() => {
      const [value, setValue] = useState('Preset value');
      return (
        <TextareaInput
          id="disabledWithValue"
          value={value}
          label="Disabled TextareaInput With Value"
          onChange={event => setValue(event.target.value)}
          isDisabled
        />
      );
    }}
  </Story>
</Canvas>

## Disabled with Placeholder

Use the `isDisabled` prop to mark the input as disabled. Disabled inputs can have placeholders.

<Canvas>
  <Story name="Disabled with Placeholder">
    {() => {
      const [value, setValue] = useState('');
      return (
        <TextareaInput
          id="disabledWithPlaceholder"
          value={value}
          label="Disabled TextareaInput With Placeholder"
          onChange={event => setValue(event.target.value)}
          isDisabled
          placeholder="Useful placeholder..."
        />
      );
    }}
  </Story>
</Canvas>

## Max Length

Use the `maxLength` prop to limit the number of characters that can be entered into an input.

<Canvas>
  <Story name="Max Length">
    {() => {
      const [value, setValue] = useState('');
      return (
        <TextareaInput
          id="maxLength"
          value={value}
          label="TextareaInput Label"
          maxLength="5"
          onChange={event => setValue(event.target.value)}
          placeholder="Can't enter more than 5 characters..."
        />
      );
    }}
  </Story>
</Canvas>

## Required with Error

Use the `error` prop to mark the input as invalid. `error` accepts a `boolean`, `string`, or `node`. A `boolean` is passed in this example.

<Canvas>
  <Story name="Required with Error">
    {() => {
      const [value, setValue] = useState('');
      return (
        <TextareaInput
          id="requiredWithError"
          value={value}
          label="TextareaInput Label"
          onChange={event => setValue(event.target.value)}
          error={true}
          isRequired
        />
      );
    }}
  </Story>
</Canvas>

## Required with Error and Validation Message

Pass a `string` or `node` to the `error` prop to render a validation message.

<Canvas>
  <Story name="Required with Error and Validation Message">
    {() => {
      const [value, setValue] = useState('');
      return (
        <TextareaInput
          id="requiredWithValidationMessage"
          value={value}
          label="TextareaInput Label"
          onChange={event => setValue(event.target.value)}
          isRequired
          error="Helpful validation message"
        />
      );
    }}
  </Story>
</Canvas>

## Not Required with Error and Validation Message

An input does not need to be marked as required to render a validation message.

<Canvas>
  <Story name="Not Required with Error and Validation Message">
    {() => {
      const [value, setValue] = useState('');
      return (
        <TextareaInput
          id="notRequiredWithValidationMessage"
          value={value}
          label="TextareaInput Label"
          onChange={event => setValue(event.target.value)}
          error="Helpful validation message"
        />
      );
    }}
  </Story>
</Canvas>

## Error with Hidden Label

<Canvas>
  <Story name="Error with Hidden Label">
    {() => {
      const [value, setValue] = useState('');
      return (
        <TextareaInput
          id="errorWithHiddenLabel"
          value={value}
          label="TextareaInput Label"
          hideLabel
          onChange={event => setValue(event.target.value)}
          error="Helpful validation message"
        />
      );
    }}
  </Story>
</Canvas>
