import { useState } from 'react';

import { Meta, Canvas, Story, Props } from '@storybook/addon-docs/blocks';
import DatePicker from './DatePicker';

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

# DatePicker

<Canvas>
  <Story name="Default DatePicker">
    {() => {
      const [dates, setDates] = useState([new Date(), new Date()]);
      return (
        <div style={{ height: 375 }}>
          <DatePicker
            startDate={dates[0]}
            endDate={dates[1]}
            onDateChange={(dates) => setDates(dates)}
          />
        </div>
      );
    }}
  </Story>
</Canvas>

# DatePicker with compare period

<Canvas>
  <Story name="DatePicker with compare period">
    {() => {
      const [dates, setDates] = useState([new Date(), new Date()]);
      return (
        <div style={{ height: 375 }}>
          <DatePicker
            startDate={dates[0]}
            endDate={dates[1]}
            onDateChange={(dates) => setDates(dates)}
            showComparePeriod
          />
        </div>
      );
    }}
  </Story>
</Canvas>

# Vertical DatePicker with 1 month shown

<Canvas>
  <Story name="Vertical DatePicker with 1 month shown">
    {() => {
      const [dates, setDates] = useState([new Date(), new Date()]);
      return (
        <div style={{ height: 700, width: 325 }}>
          <DatePicker
            startDate={dates[0]}
            endDate={dates[1]}
            onDateChange={(dates) => setDates(dates)}
            monthsShown={1}
            vertical
            showComparePeriod
          />
        </div>
      );
    }}
  </Story>
</Canvas>

# DatePicker with Honolulu timezone (UTC-10)

<Canvas>
  <Story name="DatePicker with Honolulu timezone (UTC-10)">
    {() => {
      const dateRanges = DatePicker.dateRangesByTimezone('Pacific/Honolulu');
      const [dates, setDates] = useState([dateRanges.Today.startDate, dateRanges.Today.endDate]);
      return (
        <div style={{ height: 375 }}>
          <DatePicker
            startDate={dates[0]}
            endDate={dates[1]}
            onDateChange={(dates) => setDates(dates)}
            timeZone="Pacific/Honolulu"
          />
        </div>
      );
    }}
  </Story>
</Canvas>

# DatePicker with Submit Button To Call an Action

<Canvas>
    <Story name="DatePicker with Submit Button To Call an Action">
        {() => {
            const dateRanges = DatePicker.dateRangesByTimezone('Pacific/Honolulu');
            const [dates, setDates] = useState([dateRanges.Today.startDate, dateRanges.Today.endDate]);
            return (
                <div style={{ height: 375 }}>
                    <DatePicker
                        startDate={dates[0]}
                        endDate={dates[1]}
                        onDateChange={(dates) => setDates(dates)}
                        submitButtonText={"Update View"}
                        onSubmitButtonClick={(dates) => console.log(JSON.stringify(dates))}
                    />
                </div>
            );
        }}
    </Story>
</Canvas>

## Date ranges

`DatePicker` has a collection of built-in date ranges that are used to populate the date range dropdown, and to validate the `startDate`/`endDate` props and select the appropriate label to render into the CTA button.

Each date range contains a `label`, `startDate` and `endDate` - the dates are calculated at runtime relative to the current date (today).

These ranges are exported as `DatePicker.dateRanges` to make it easier for you to initialise your state with these preset dates.

Also there is ranges that support custom timezone, these are exported as `DatePicker.dateRangesByTimezone`.

Examples of usage:

```jsx
const defaultRange = DatePicker.dateRanges.LastMonth;

const [startDate, setStartDate] = useState(defaultRange.startDate);
const [endDate, setEndDate] = useState(defaultRange.endDate);

return (
  <DatePicker
    startDate={startDate}
    endDate={endDate}
    ...
  />
)
```

```jsx
const dateRanges = DatePicker.dateRangesByTimezone('Pacific/Honolulu');
const defaultRange = dateRanges.LastMonth;

const [startDate, setStartDate] = useState(defaultRange.startDate);
const [endDate, setEndDate] = useState(defaultRange.endDate);

return (
  <DatePicker
    startDate={startDate}
    endDate={endDate}
    timeZone="Pacific/Honolulu"
    ...
  />
)
```

Below is a list of all built-in date ranges:

- `Today`
- `Yesterday`
- `Last7Days`
- `Last30Days`
- `Last90Days`
- `LastMonth`
- `Last12Months`
- `WeekToDate`
- `MonthToDate`
- `YearToDate`

## Props

<Props of={DatePicker} />