import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { number, boolean, select } from '@storybook/addon-knobs'
import { action } from '@storybook/addon-actions'
import Datepicker from './'

<Meta
  title="Components/Dropdowns/Datepicker"
  component={Datepicker}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/TgNl8UMoxkDTpCfhdg77YX/Date-Picker?node-id=0%3A1',
    },
  }}
/>

# Datepicker

Renders a calendar that allows picking a date.

Features:

- Navigate to next and previous month
- Navigate to a given month within the currently selected year
- Navigate to a year inside a range
- Disable selecting dates in the future
- Pass a starting date to be selected

Notes:

Datepicker uses [@datepicker-react/hooks](https://www.npmjs.com/package/@datepicker-react/hooks) to handle (most of) the calendar logic. For future reference and features it supports:

- Date range selection
- Blocking specific dates
- Multiple month view

Implementing these features in `Datepicker` should be straightforward 🤞 and only added as needed.

<Canvas>
  <Story name="default">
    <Datepicker
      allowFutureDatePick={boolean('allowFutureDatePick', true)}
      firstDayOfWeek={select(
        'first Day Of Week',
        {
          sunday: 0,
          monday: 1,
          tuesday: 2,
          wednesday: 3,
          thursday: 4,
          friday: 5,
          saturday: 6,
        },
        1
      )}
      startDate={select(
        'Start date',
        {
          unselected: null,
          today: new Date().toString(),
          '25/03/1982': new Date(1982, 2, 25).toString(),
        },
        null
      )}
      onDateChange={action('onDateChange')}
    />
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: HsApp

<br />
<br />

### Props

<ArgsTable of={Datepicker} />

## Sub-components

Datepicker is composed of a few components that in normal circumstances you shouldn't need to use directly, listed here for reference:

- **DailyCalendar**: Renders and handles the week/days calendar actions
- **PeriodCalendar**: Renders and handles the months and years calendar actions
- **Navigator**: Handles the calendar navigation
  - Single step (month by month, year by year, year range by year range depending on the navigation level) using the arrow buttons
  - Skip to any month faster by using the "deep navigator button"
  - Skip to any year faster by using the "deep navigator button" again
- **Month**: Renders a month inside `DailyCalendar`
- **Day**: Renders a day inside `Month`

## Stories

#### Date range selection

<Canvas>
  <Story name="range selection">
    <Datepicker
      enableRangeSelection
      minBookingDays={number('Minimum booking days', 1)}
      onDateChange={action('onDateChange')}
    />
  </Story>
</Canvas>
