// @flow
import React, { useCallback, useState } from 'react';
import { IntlProvider } from 'react-intl';
import { action } from '@storybook/addon-actions';
import { Datepicker } from './index';
import docs from './datepicker.mdx';

export default {
  title: 'One-off/Datepicker',
  component: Datepicker,
  parameters: {
    docs: {
      page: docs,
    },
  },
};

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];
};

export const Normal = () => {
  const [date, onChange] = useDatePickerDemo();

  return <Datepicker {...DEFAULT_PROPS} onChange={onChange} value={date} />;
};

export const WithWeekendDatesDisabled = () => {
  const [date, onChange] = useDatePickerDemo();

  return (
    <Datepicker
      {...DEFAULT_PROPS}
      onChange={onChange}
      value={date}
      disableWeekends
    />
  );
};

export const WithCustomDatesDisabled = () => {
  const [date, onChange] = useDatePickerDemo();

  return (
    <Datepicker
      {...DEFAULT_PROPS}
      onChange={onChange}
      value={date}
      disabledDates={[tomorrow]}
    />
  );
};

export const WithPastDatesDisabled = () => {
  const [date, onChange] = useDatePickerDemo();

  return (
    <Datepicker
      {...DEFAULT_PROPS}
      onChange={onChange}
      value={date}
      disablePastDates
    />
  );
};

export const WithEverythingDisabled = () => {
  const [date, onChange] = useDatePickerDemo();

  return (
    <Datepicker
      {...DEFAULT_PROPS}
      onChange={onChange}
      value={date}
      disabledDates={[tomorrow]}
      disablePastDates
      disableWeekends
    />
  );
};

export const WithEnGbLocale = () => {
  const [date, onChange] = useDatePickerDemo();

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

export const WithEnUsLocale = () => {
  const [date, onChange] = useDatePickerDemo();

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