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

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

<Title>Select Field</Title>
<Subtitle>A single select dropdown for form input</Subtitle>

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

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

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

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

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

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

### Headers
You can render `optgroups` by using the nested options syntax:
<Canvas withSource="open">
  <Story name="Headers" story={stories.Headers} />
</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.

Note: When the placeholder is active, the select's value will be equal to an empty string.
<Canvas>
  <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, use the appropriate aria props.
<Canvas>
  <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 exclude={['inlineAction', 'maxCharCount', 'minCharCount']} />

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

- This component is a replacement for the LUI Now **[NativeSelect](https://lendi.style/legacy/packages/dropdown/NativeSelect)** component from the `@lendi-ui/dropdown` package. _It does not cover the use cases that are covered by the [Select](https://lendi.style/legacy/packages/dropdown/Select) component_. Those more complex use cases will be covered by a future LUI Next component.
- We don't support className as a prop, if you have a customization request, please reach out to LUI Ops
- We've added support for headers (via optgroup) as a new feature. See <a href="#headers">Headers</a> section above.
- This is no `isFullWidth` prop. SelectField is 100% width by default.
- There is only one input size in the new designs. The width can be overridden but the default height remains the same.
- There is no `isMultiple` prop. Multi-select will be covered by a future LUI Next component.
- There is no `isLoading` state in the LUI Next design. If you have a use case for this, please reach out to LUI Ops.
- There is currently no `onFocus` or `onBlur` props. If you have a use case for this, please reach out to LUI Ops.
- `items` is now called `options`. See <a href="#props">props</a> table above.
- Options do not currently have a `isHidden` prop. If you have a use case for this, please reach out to LUI Ops.