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

import * as React from "react";
import moment from "moment-timezone";
import ConditionalFilter from "../ConditionalFilter";
import DateRangeFilter from "../DateRangeFilter";
import {addDaysFromCalendarDate, today} from "../../date/CalendarDateType";

/**
 * @title Date Filter, disable operator filter, customize the return value using valueFilterDefault
 * @description Adjust the valueFilterDefault prop so <DateRangeFilter> works. Most filter components have `value={Array}`, but it requires an object with specific fields.
 */

export default function ConditionalFilterBasic(): React.Node {
  const timezone = moment.tz.guess();
  const [values, setValues] = React.useState();
  const types = {
    label: "Event",
    options: [
      {
        label: "Delivery",
        value: "delivery",
      },
      {
        label: "Pickup",
        value: "pickup",
      },
    ],
  };
  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 defaultValue = {type: "preset", ...presets[0]};

  return (
    <ConditionalFilter
      label="Date Range Filter"
      onApply={vals => setValues(vals)}
      showOperatorFilter={false}
      typeFilter={types}
      valueFilterDefault={defaultValue}
      valueFilterRenderer={(_type, value, updateValue) => (
        <DateRangeFilter
          label="Range"
          value={value}
          onChange={val => updateValue(val)}
          presets={presets}
        />
      )}
      value={values}
    />
  );
}