// @flow
import React, { useState } from 'react';
import { IntlProvider } from 'react-intl';
import { Datepicker } from './index';
import docs from './datepicker.mdx';
import { Box } from '../../primitives/box';
import { TertiaryButton } from '../../core/actions/tertiary-button';
import { Text } from '../../core/typography/text';

export default {
  title: 'Components/Inputs/Datepicker',
  component: Datepicker,
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const today = new Date('2021-01-29');
const tomorrow = new Date('2021-01-30');

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

export const Normal = () => {
  const [date, setDate] = useState(today);
  return <Datepicker {...DEFAULT_PROPS} onChange={setDate} value={date} />;
};

export const UndefinedDate = () => {
  const [date, setDate] = useState();
  return <Datepicker {...DEFAULT_PROPS} onChange={setDate} value={date} />;
};

export const ResetProgramatically = () => {
  const [date, setDate] = useState(today);
  return (
    <>
      <Box stacked="row" align="center">
        <Datepicker
          {...DEFAULT_PROPS}
          onChange={setDate}
          value={date}
          grow={1}
          shrink={1}
          spacing="mr1"
        />
        <TertiaryButton onClick={() => setDate()}>Reset</TertiaryButton>
      </Box>
      <Text spacing="mt1">Current value: {String(date)}</Text>
    </>
  );
};

export const WithWeekendDatesDisabled = () => {
  const [date, setDate] = useState(today);

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

export const WithCustomDatesDisabled = () => {
  const [date, setDate] = useState(today);

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

export const WithPastDatesDisabled = () => {
  const [date, setDate] = useState(today);

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

export const WithEverythingDisabled = () => {
  const [date, setDate] = useState(today);

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

export const WithEnGbLocale = () => {
  const [date, setDate] = useState(today);

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

export const WithEnUsLocale = () => {
  const [date, setDate] = useState(today);

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