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

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

# DateInput

Use a DateInput to allow users to select a date close to today and place that date in an input field.
Avoid using this component if the user needs to enter a date that is many years in the past (i.e. birthday) or future.
For entering these types of dates we recommend using the `TextInput` component with a `date` mask. See an example here:
[TextInput Date Example](?path=/docs/components-textinput-overview--with-date-mask)

<Canvas isExpanded>
  <DateInput
    textInputProps={{
      id: 'exampleDateInput',
      name: 'selectDate',
      label: 'Select a Date',
      placeholder: 'e.g. 11/02/2020',
    }}
  />
</Canvas>

## Props

<ArgsTable of={DateInput} />

## Default

The DateInput is composed of 3 components. Each can be tailored based on their props. They are:

1. [DatePicker](?path=/docs/components-datepicker-overview--basic-example)
2. [Popover](?path=/docs/components-popover-overview--demo)
3. [TextInput](?path=/docs/components-textinput-overview--default-story)

The `DateInput` uses sensible defaults for these to allow for very straightforward ergonomics that allow users to
select dates with minimal work.

<Canvas>
  <Story name="Basic Usage">
    {() => {
      const [selectedDate, setSelectedDate] = useState(null);
      const handleClear = () => {
        setSelectedDate(null);
      };
      return (
        <DateInput
          datePickerProps={{
            selected: selectedDate,
            onChange: setSelectedDate,
          }}
          textInputProps={{
            placeholder: 'e.g. 11/02/2020',
            onClear: handleClear,
            id: 'defaultDatePicker',
            name: 'selectDate',
            label: 'Select Date',
          }}
        />
      );
    }}
  </Story>
</Canvas>

## Date Range

<Canvas>
  <Story name="Date Range">
    {() => {
      const [startDate, setStartDate] = useState(null);
      const [endDate, setEndDate] = useState(null);
      const setDate = ([startDate, endDate]) => {
        setStartDate(startDate);
        setEndDate(endDate);
      };
      const handleClear = () => {
        setStartDate(null);
        setEndDate(null);
      };
      return (
        <DateInput
          datePickerProps={{
            onChange: setDate,
            selected: startDate,
            selectsRange: true,
            startDate,
            endDate,
          }}
          textInputProps={{
            onClear: handleClear,
            id: 'myDateRangePicker',
            name: 'myDateRangePicker',
            label: 'Select Date Range',
          }}
        />
      );
    }}
  </Story>
</Canvas>

## With Min/Max dates

<Canvas>
  <Story name="Min/Max Dates">
    {() => {
      const [selectedDate, setSelectedDate] = useState(null);
      const handleClear = () => {
        setSelectedDate(null);
      };
      const min = new Date(2022, 6, 18);
      min.setDate(min.getDate() - 10);
      const max = new Date(2022, 6, 18);
      max.setDate(max.getDate() + 100);
      return (
        <DateInput
          datePickerProps={{
            selected: selectedDate,
            maxDate: max,
            minDate: min,
            onChange: setSelectedDate,
          }}
          textInputProps={{
            placeholder: 'e.g. 11/02/2020',
            onClear: handleClear,
            id: 'defaultDatePicker',
            name: 'selectDate',
            label: 'Select Date',
          }}
        />
      );
    }}
  </Story>
</Canvas>


## Custom Date Format

You can manipulate the format on the input field by using the `dateFormat` and `dateOptions`
props. Under the hood our component uses the [date-fns `format` function](https://date-fns.org/v2.16.1/docs/format)
to generate a string based on these options.

<Canvas>
  <Story name="Custom Date Format">
    {() => {
      const [selectedDate, setSelectedDate] = useState(new Date('2020, 11, 3'));
      const [inputValue, setInputValue] = useState('');
      const handleClear = () => {
        setSelectedDate(null);
      };
      return (
        <Box gap="md">
          <DateInput
            dateFormat={'MMMM dd, yyyy'}
            datePickerProps={{
              selected: selectedDate,
              onChange: setSelectedDate,
            }}
            textInputProps={{
              onClear: handleClear,
              id: 'withCustomDateFormat',
              name: 'selectDate',
              label: 'Select Date',
            }}
          />
          <Box>
            <p>Selected Date (as ISO String): {selectedDate ? selectedDate.toISOString() : null}</p>
          </Box>
        </Box>
      );
    }}
  </Story>
</Canvas>

## On using onBlur event with DateInput

The input is technically blurred whenever the calendar popover is interacted but as far as the user
is concerned they are still interacting with the DateInput. Please keep this in mind when
triggering form validation after an onBlur event.

Make sure to pass the `onBlur` prop to the input via `textInputProps`.

<Canvas>
  <Story name="Input Blur Event">
    {() => {
      const [selectedDate, setSelectedDate] = useState(new Date('2020, 11, 3'));
      const [inputValue, setInputValue] = useState('');
      const handleTextInputBlur = () => {
        alert('TextInput Blur Event');
      };
      return (
        <Box gap="md">
          <DateInput
            dateFormat={'MMMM dd, yyyy'}
            datePickerProps={{
              selected: selectedDate,
              onChange: setSelectedDate,
            }}
            textInputProps={{
              id: 'withCustomDateFormat',
              name: 'selectDate',
              label: 'Select Date',
              onBlur: handleTextInputBlur,
            }}
          />
        </Box>
      );
    }}
  </Story>
</Canvas>
