// @flow
import React, { useCallback, useState } from 'react';
import { IntlProvider } from 'react-intl';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Datepicker } from './index';
import { withDocs } from '../../../.storybook/with-docs';
import docs from './DATEPICKER.mkd';

const today = new Date();
const tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);

const DEFAULT_PROPS = {
  label: 'Choose a date',
};

const useDatePickerDemo = () => {
  const [date, setDate] = useState(new Date());

  const onChange = useCallback(
    newDate => {
      setDate(newDate);
      action('onChange')(newDate);
    },
    [setDate],
  );

  return [date, onChange];
};

storiesOf('One-off/Datepicker', module)
  .add(
    'normal',
    withDocs(docs)(() => {
      const [date, onChange] = useDatePickerDemo();

      return <Datepicker {...DEFAULT_PROPS} onChange={onChange} value={date} />;
    }),
  )
  .add(
    'with weekend dates disabled',
    withDocs(docs)(() => {
      const [date, onChange] = useDatePickerDemo();

      return (
        <Datepicker
          {...DEFAULT_PROPS}
          onChange={onChange}
          value={date}
          disableWeekends
        />
      );
    }),
  )
  .add(
    'with custom dates disabled',
    withDocs(docs)(() => {
      const [date, onChange] = useDatePickerDemo();

      return (
        <Datepicker
          {...DEFAULT_PROPS}
          onChange={onChange}
          value={date}
          disabledDates={[tomorrow]}
        />
      );
    }),
  )
  .add(
    'with past dates disabled',
    withDocs(docs)(() => {
      const [date, onChange] = useDatePickerDemo();

      return (
        <Datepicker
          {...DEFAULT_PROPS}
          onChange={onChange}
          value={date}
          disablePastDates
        />
      );
    }),
  )
  .add(
    'with everything disabled',
    withDocs(docs)(() => {
      const [date, onChange] = useDatePickerDemo();

      return (
        <Datepicker
          {...DEFAULT_PROPS}
          onChange={onChange}
          value={date}
          disabledDates={[tomorrow]}
          disablePastDates
          disableWeekends
        />
      );
    }),
  )
  .add(
    'with en-GB locale',
    withDocs(docs)(() => {
      const [date, onChange] = useDatePickerDemo();

      return (
        <IntlProvider locale="en-GB">
          <Datepicker {...DEFAULT_PROPS} onChange={onChange} value={date} />
        </IntlProvider>
      );
    }),
  );
