import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { DateInput, InnerDateInput } from "@components/date-input";
import { subMonths, subWeeks } from "date-fns";

<Meta
    title="Components/DateInput"
    id="date-input"
/>

# DateInput

<Tagline>An input to enter a single date value.</Tagline>

<ComponentInfo
    usage={"import { DateInput } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/date-input/src"
/>

## Usage

> The [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date) constructor `monthIndex` argument is 0 based. Therefore, for `01/01/2021` you must write `new Date(2021, 0, 1)`.

### Default

A default date input.

<Preview>
    <Story name="default">
        <DateInput />
    </Story>
</Preview>

### Value

A date input can have a value.

<Preview>
    <Story name="value">
        <DateInput defaultValue={new Date(1970, 0, 5)} />
    </Story>
</Preview>

### Presets

A date input can offer a predefined set of frequently used dates:

<Preview scope={{ subMonths, subWeeks }}>
    <Story name="presets">
        <DateInput
            presets={[
                { text: "Last week", date: subWeeks(new Date(), 1) },
                { text: "Last month", date: subMonths(new Date(), 1) },
                { text: "Last 3 months", date: subMonths(new Date(), 3) },
                { text: "Last 6 months", date: subMonths(new Date(), 6) }
            ]}
        />
    </Story>
</Preview>

By default, presets are displayed as *compact* but they could also be displayed as *expanded*:

<Preview scope={{ subMonths, subWeeks }}>
    <Story name="expanded presets">
        <DateInput
            presetsVariant="expanded"
            presets={[
                { text: "7 D", date: subWeeks(new Date(), 1) },
                { text: "1 M", date: subMonths(new Date(), 1) },
                { text: "3 M", date: subMonths(new Date(), 3) },
                { text: "6 M", date: subMonths(new Date(), 6) }
            ]}
        />
    </Story>
</Preview>

### Disabled

A date input can be disabled.

<Preview>
    <Story name="disabled">
        <DateInput disabled />
    </Story>
</Preview>

### Readonly

A date input can be readonly.

<Preview>
    <Story name="readonly">
        <DateInput readOnly />
    </Story>
</Preview>

### Fluid

A date input can take the width of its container.

<Preview>
    <Story name="fluid">
        <DateInput fluid />
    </Story>
</Preview>

### Validation

A date input can display a validation state to communicate to the user whether the current value is valid or invalid. Implement your own validation logic in your app and pass either `"valid"` or `"invalid"` to the input via the `validationState` prop.

The example below illustrates how one would validate if the date is greater than *05/01/1970*.

<Preview filePath="/date-input/docs/DateValidation" />

### Controlled

A date input `value` can be handled in controlled mode.

<Preview filePath="/date-input/docs/ControlledDateInput" />

## API

### DateInput

<ComponentInfo
    usage={"import { DateInput } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerDateInput.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerDateInput} sort="alpha" />

