/**
 * TEAM: frontend_infra
 * @flow
 */

import * as React from "react";

import {storiesOf} from "@storybook/react";
import moment from "moment-timezone";

import Group from "../../Group";
import Text from "../../Text";
import DateRangeFilter from "../../filter/DateRangeFilter";
import sections from "../sections";
import {addDaysFromCalendarDate, today} from "../../date/CalendarDateType";

const stories = storiesOf(`${sections.filter}/DateRangeFilter`, module);
stories.add("basic usage", () => <FilterHoist />);

export function FilterHoist(): React.Node {
  const timezone = moment.tz.guess();

  const presets = [
    {
      label: "All time",
      startDate: addDaysFromCalendarDate(today(timezone), -365),
      endDate: addDaysFromCalendarDate(today(timezone), 365),
    },
    {
      label: "Last week",
      startDate: addDaysFromCalendarDate(today(timezone), -7),
      endDate: today(timezone),
    },
    {
      label: "Next month",
      startDate: addDaysFromCalendarDate(today(timezone), -1),
      endDate: addDaysFromCalendarDate(today(timezone), 30),
    },
  ];

  const [selected, setSelected] = React.useState({
    type: "preset",
    ...presets[0],
  });

  return (
    <Group flexDirection="column">
      <Text>DateRangeFilter</Text>
      <DateRangeFilter
        label="Delivery Date Range"
        value={selected}
        onChange={setSelected}
        presets={presets}
      />
    </Group>
  );
}