import { useState } from "react";
import { subWeeks, subMonths, addMonths } from "date-fns";
import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Box } from "../Box";
import { DateRangePicker } from "./DateRangePicker";

<Meta title="Components/Forms/Date Range Picker" component={DateRangePicker} />

<ComponentHeading
  componentName="DateRangePicker"
  description="Selects a preset or custom date range, useful when viewing data over time"
  sourcePath="src/components/DateRangePicker/DateRangePicker.tsx"
/>

```jsx
import { DateRangePicker } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="DateRangePicker">
    {() => {
      const testPresets = [
        {
          name: "Last Week",
          startDate: subWeeks(new Date(), 1),
          endDate: new Date(),
        },
        {
          name: "Last Month",
          startDate: subMonths(new Date(), 1),
          endDate: new Date(),
        },
      ];
      const [value, setValue] = useState(testPresets[0]);
      return (
        <DateRangePicker
          onChange={setValue}
          align="left"
          value={value}
          presets={testPresets}
          minDate={subMonths(new Date(), 2)}
          maxDate={addMonths(new Date(), 1)}
        />
      );
    }}
  </Story>
</Preview>

This component should be used as a view control when viewing data over time. It is
not designed to be used within a form.

## Props

<Props of={DateRangePicker} />

## Demos

### Right aligned

<Preview withSource={SourceState.OPEN}>
  <Story name="DateRangePicker right aligned">
    {() => {
      const testPresets = [
        {
          name: "Last Week",
          startDate: subWeeks(new Date(), 1),
          endDate: new Date(),
        },
        {
          name: "Last Month",
          startDate: subMonths(new Date(), 1),
          endDate: new Date(),
        },
      ];
      const [value, setValue] = useState(testPresets[0]);
      return (
        <Box className="text-right">
          <DateRangePicker
            onChange={setValue}
            align="right"
            value={value}
            presets={testPresets}
            minDate={subMonths(new Date(), 2)}
            maxDate={addMonths(new Date(), 1)}
          />
        </Box>
      );
    }}
  </Story>
</Preview>