/**
 * 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 DateTimeRangeFilter from "../../filter/DateTimeRangeFilter";
import sections from "../sections";
import {addDaysFromCalendarDate, today} from "../../date/CalendarDateType";
import {wallTime} from "../../date/wallTime";

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

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

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

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

  return (
    <Group flexDirection="column">
      <Text>DateTimeRangeFilter</Text>
      <DateTimeRangeFilter
        label="Delivery DateTime Range"
        value={selected}
        onChange={setSelected}
        presets={presets}
        timeZone={moment.tz.guess()}
      />
    </Group>
  );
}