import { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { DatePicker } from '../src/index';
import Ranged from '../src/components/DatePicker/StoryHelpers/ranged';

<Meta title="Components|DatePicker" component={DatePicker} />

# DatePicker

<Preview>
  <Story name="simple">
    <DatePicker />
  </Story>
</Preview>

The DatePicker component is used when a form requires a date or ranged date field.
However, using the inline attribute use cases become a lot more varied.

<Props of={DatePicker} />

## Disabled

<Story name="disabled">
  <DatePicker disabled />
</Story>

## Label

<Story name="label">
  <DatePicker label="Geboortedatum" />
</Story>

## Month Picker

<Story name="month picker">
  <DatePicker format="MMMM YYYY" monthPicker />
</Story>

## With Time

<Story name="with time">
  <DatePicker format="D MMM YYYY - hh:mm" showTime />
</Story>

## Range

<Story name="range">
  <Ranged />
</Story>

## Inline

<Preview>
  <Story name="inline">
    <DatePicker inline />
  </Story>
</Preview>

## Exclude Dates

<Preview>
  <Story name="exclude dates">
    <DatePicker
      inline
      format="D MMM YYYY"
      exclude={[
        new Date(),
        new Date().setDate(new Date().getDate() + 1),
        new Date().setDate(new Date().getDate() + 2),
      ]}
    />
  </Story>
</Preview>

## Allow Only

<Preview>
  <Story name="allow only">
    <DatePicker
      inline
      format="D MMM YYYY"
      only={[
        new Date().setDate(new Date().getDate() - 1),
        new Date(),
        new Date().setDate(new Date().getDate() + 1),
        new Date().setDate(new Date().getDate() + 2),
      ]}
    />
  </Story>
</Preview>