import { useState } from 'react';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { DatePicker } from './DatePicker';
import { Box } from '../Box/Box';
import { Heading } from '../Heading/Heading';

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

# DatePicker

The Datepicker lets users select a date by showing them a calendar.

It is also used in combination with an input and popover by the [DateInput component](/?path=/docs/components-dateinput-overview--basic-usage).

### It can be used for:

- selecting a single date
- selecting a start and end date

## Props

<ArgsTable of={DatePicker} />

## Basic Example

<Canvas>
  <Story name="Basic Example">
    {() => {
      const [selectedDate, setSelectedDate] = useState(new Date(2019, 11, 3));
      return (
        <Box gap="md">
          <DatePicker onChange={setSelectedDate} selected={selectedDate} />
          <p>Selected Date: {selectedDate.toISOString()}</p>
        </Box>
      );
    }}
  </Story>
</Canvas>

## Date Range

<Canvas>
  <Story name="Date Range">
    {() => {
      const [startDate, setStartDate] = useState(new Date(2019, 11, 3));
      const [endDate, setEndDate] = useState(new Date(2019, 11, 28));
      const setDate = ([startDate, endDate]) => {
        setStartDate(startDate);
        setEndDate(endDate);
      };
      return (
        <Box gap="md">
          <DatePicker
            onChange={setDate}
            selected={startDate}
            startDate={startDate}
            endDate={endDate}
            selectsRange
          />
          <p>
            {`Selected Date Range: ${startDate && startDate.toISOString()} - ${
              endDate && endDate.toISOString()
            }`}
          </p>
        </Box>
      );
    }}
  </Story>
</Canvas>

## Min/Max Dates

<Canvas>
  <Story name="Min/max Dates">
    {() => {
      const [startDate, setStartDate] = useState(new Date(2019, 11, 18));
      const min = new Date(2019, 11, 18);
      min.setDate(min.getDate() - 5);
      const max = new Date(2019, 11, 18);
      max.setDate(max.getDate() + 5);
      return (
        <Box gap="md">
          <DatePicker
            selected={startDate}
            onChange={setStartDate}
            minDate={min}
            maxDate={max}
          />
          <p>Selected Date: {startDate.toISOString()}</p>
        </Box>
      );
    }}
  </Story>
</Canvas>

## Month Picker

<Canvas>
  <Story name="Month Picker">
    {() => {
      const [startDateOne, setStartDateOne] = useState(new Date(2019, 10));
      const [startDateTwo, setStartDateTwo] = useState(new Date(2019, 10));
      const [startDateThree, setStartDateThree] = useState(new Date(2019, 10));
      return (
        <Box display="flex" direction="row" gap="md">
          <Box
            gap="md"
            display="flex"
            direction="column"
            alignItems="center"
            width="33"
          >
            <Heading size="md">Default</Heading>
            <DatePicker
              selected={startDateOne}
              onChange={setStartDateOne}
              showMonthYearPicker
            />
            <p>{startDateOne.toISOString()}</p>
          </Box>
          <Box
            gap="md"
            display="flex"
            direction="column"
            alignItems="center"
            width="33"
          >
            <Heading size="md">With full month name</Heading>
            <DatePicker
              selected={startDateTwo}
              onChange={setStartDateTwo}
              showMonthYearPicker
              showFullMonthYearPicker
            />
            <p>{startDateTwo.toISOString()}</p>
          </Box>
          <Box
            gap="md"
            display="flex"
            direction="column"
            alignItems="center"
            width="33"
          >
            <Heading size="md">With Two-column layout</Heading>
            <DatePicker
              selected={startDateThree}
              onChange={setStartDateThree}
              showMonthYearPicker
              showFullMonthYearPicker
              showTwoColumnMonthYearPicker
            />
            <p>{startDateThree.toISOString()}</p>
          </Box>
        </Box>
      );
    }}
  </Story>
</Canvas>

## Show Multiple Months

<Canvas>
  <Story name="Multiple Months">
    {() => {
      const [startDate, setStartDate] = useState(new Date(2019, 11, 3));
      const [endDate, setEndDate] = useState(new Date(2019, 12, 20));
      const setDate = ([startDate, endDate]) => {
        console.log(startDate, endDate);
        setStartDate(startDate);
        setEndDate(endDate);
      };
      return (
        <Box gap="md">
          <DatePicker
            onChange={setDate}
            selected={startDate}
            startDate={startDate}
            endDate={endDate}
            selectsRange
            monthsShown={2}
          />
          <p>Start Date: {startDate && startDate.toISOString()}</p>
          <p>End Date: {endDate && endDate.toISOString()}</p>
        </Box>
      );
    }}
  </Story>
</Canvas>

## With Time Picker

<Canvas>
  <Story name="With Time Picker">
    {() => {
      const [startDate, setStartDate] = useState(new Date('1993/09/28'));
      return (
        <Box gap="md">
          <DatePicker
            selected={startDate}
            onChange={date => setStartDate(date)}
            showTimeSelect
            timeIntervals={15}
            timeCaption="Time"
          />
          <p>Selected Date: {startDate && startDate.toISOString()}</p>
        </Box>
      );
    }}
  </Story>
</Canvas>

## Open by default on a specific date

<Canvas>
  <Story name="Open on Date">
    {() => {
      const [startDate, setStartDate] = useState(new Date('1993/09/28'));
      return (
        <Box gap="md">
          <DatePicker
            onChange={setStartDate}
            selected={startDate}
            openToDate={new Date('1993/09/28')}
          />
          <p>Selected Date: {startDate && startDate.toISOString()}</p>
        </Box>
      );
    }}
  </Story>
</Canvas>

## With Children

<Canvas>
  <Story name="With Children">
    {() => {
      const [selectedDate, setSelectedDate] = useState(new Date(2019, 11, 3));
      return (
        <Box gap="md">
          <DatePicker onChange={setSelectedDate} selected={selectedDate}>
            <Box
              display="block"
              style={{ textAlign: 'center' }}
              color="primary"
            >
              It will be sunny out today!
            </Box>
          </DatePicker>
          <p>Selected Date: {selectedDate.toISOString()}</p>
        </Box>
      );
    }}
  </Story>
</Canvas>
