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

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

<Title>Date Field</Title>
<Subtitle>A combo form field which collects a date format</Subtitle>

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

<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

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

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

### Disabled
<Canvas>
  <Story name="Disabled" story={stories.Disabled} />
</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>

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

### Validation
This field does not provide client side validation by default. However, it does specify that only numbers may be entered via the pattern attribute, which you may hook into using the browser [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation#constraint_validation_process).

We also still support min and maxCharCount, which will prevent typing more than the provided number of digits.
<Canvas withSource="open">
  <Story name="Validation" story={stories.Validation} />
</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.

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.

## Props
<ArgsTable exclude={['inlineAction']} />

## LUI Now Migration guide
- Replace imports of `@lendi-ui/date-picker` with `@lendi/ui`
- We no longer accept change functions for day/month/year, instead you can now add a single onChange handler
- We also no longer support multiple values for individual fields, instead we use a single value.
- The component now returns a date string `yyyy-mm-dd` via both ref and value
- `value` and `defaultValue` now accept a JS Date object