import { useState } from "react";
import { subWeeks, subMonths, addMonths } from "date-fns";
import { Meta, Canvas, ArgsTable, Story, SourceState } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Box } from "../Box";
import { DateRangePickerLegacy } from "./DateRangePickerLegacy";

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

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

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

## Installation

```jsx
import { DateRangePickerLegacy } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <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 (
        <DateRangePickerLegacy
          onChange={setValue}
          align="left"
          value={value}
          presets={testPresets}
          minDate={subMonths(new Date(), 2)}
          maxDate={addMonths(new Date(), 1)}
        />
      );
    }}
  </Story>
</Canvas>

## API

<ArgsTable of={DateRangePickerLegacy} />

## Demos

### Right aligned

<Canvas 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">
          <DateRangePickerLegacy
            onChange={setValue}
            align="right"
            value={value}
            presets={testPresets}
            minDate={subMonths(new Date(), 2)}
            maxDate={addMonths(new Date(), 1)}
          />
        </Box>
      );
    }}
  </Story>
</Canvas>