import { Meta, Story, Canvas, Title, Subtitle, ArgsTable, Source } from '@storybook/addon-docs';
import { TextField } from '@lendi/ui/TextField';
import * as stories from './TextField.stories.tsx';
import {TITLE_COMPONENTS_DECOMISSIONED, TITLE_INPUTS} from "../../../../../docs/content";

<Meta title={`${TITLE_COMPONENTS_DECOMISSIONED}/${TITLE_INPUTS}/TextField`} component={TextField}/>

<Title>Text Field</Title>
<Subtitle>A form field for plain text</Subtitle>

<Source language='tsx' dark={true} code={`import { TextField } from '@lendi/ui/TextField';`} />

<Canvas>
  <Story name="Interactive" story={stories.Interactive} />
</Canvas>

<ArgsTable story="Interactive" include={['isDisabled', 'label', 'placeholder', 'labelSuffix', 'helpText', 'variant', 'validationState', 'errorText']} />

Note: this props table is not complete. See <a href="#props">below</a> for full props.

## Options

### Email variant
Use the email variant for email based inputs.
<Canvas>
  <Story name="Email" story={stories.Email} />
</Canvas>

### Error state
Use the `validationState` and `errorText` props to produce an error style.
<Canvas>
  <Story name="Errors" story={stories.Errors} />
</Canvas>

### Clear action
<Canvas>
  <Story name="Clear action" story={stories.ClearAction} />
  <Story name="Clear action with value" story={stories.ClearActionWithValue} />
</Canvas>

### Width options
<Canvas>
  <Story name="Widths" story={stories.Widths} />
</Canvas>

## Controlled vs Uncontrolled
We provide both an uncontrolled and controlled API. You may use either depending on your use case.

### Controlled
In the controlled version, you can keep `value` in state and update it via `onChange`.
<Canvas>
  <Story name="Controlled" story={stories.Controlled} />
</Canvas>

### Uncontrolled
When using the uncontrolled API, you'll need to pass a ref to the component in order to read its value.
<Canvas withSource="open">
  <Story name="Uncontrolled" story={stories.Uncontrolled} />
</Canvas>

## Accessibility
### Labels
Labels are required in all cases. In the rare case where a label exists elsewhere or a label should be non-visible (such as in a multi-part field like a country code within a phone number field), use the appropriate aria props.
<Canvas withSource="open">
  <Story name="Labels" story={stories.Labels} />
</Canvas>

By default, the component generates an id and associates the input with its help and error text via aria-describedby, so don't worry about implementing that behavior.

### Use `autoComplete` when applicable
In order to satisfy the WCAG Requirement [1.3.5: Identify Input Purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), when a field is expected data that matches one of the available `autocomplete` options, use it like so. If none of the autocomplete values are applicable, do not pass anything.
<Canvas>
  <Story name="Autocomplete" story={stories.AutoComplete} />
</Canvas>


## Props
<ArgsTable />

## LUI Now Migration guide
If you're migrating from [@lendi-ui/text-input](https://lendi.style/legacy/packages/text-input/), please note:

- The TextField input is specifically for types of `text` and `email`. Other input types will be addressed by specific components in later releases.
- We've removed `autofocus` for accessibility reasons
- We don't support className as a prop, if you have a customization request, please reach out to LUI Ops
- The input label is now included in the component by default. Field will be deprecated once org-wide migration efforts have commenced.
- The previous `input-button` variant is not included in this release. This will be included in a new Search input in a future release.
- There is currently no support for an "inverse" mode included. This was a Design decision and may change in the future. If you have a use case, please reach out.
- There is only one input size in the new designs. The width can be overridden but the default height remains the same.
- There is currently no `onFocus` or `onBlur` props. If you have a use case for this, please reach out to LUI Ops.
- This is no `isFullWidth` prop. TextField is 100% width by default.
- There is no `before` and `after` prop. Some variants will render specific icons and include specific actions by default. If there is one that you think is missing, please reach out.
- The `isReadOnly` prop has been removed. Please reach out if you have a use case that is not covered by disabling the field.