/**
 * TEAM: frontend_infra
 * WATCHERS: emcelyea
 *
 * @flow
 */

import * as React from "react";
import {storiesOf} from "@storybook/react";
import {boolean, withKnobs} from "@storybook/addon-knobs";
import moment from "moment-timezone";

import Group from "latitude/Group";
import Text from "latitude/Text";
import {
  AgainstWindowEdge,
  Modal,
} from "../story_utilities/riskyPositioningWrappers";
import DateRangeFilter from "../../filter/DateRangeFilter";
import sections from "../sections";
import ConditionalFilter from "../../filter/ConditionalFilter";
import SearchableMultiselectFilter from "../../filter/SearchableMultiselectFilter";
import SelectFilter from "../../filter/SelectFilter";
import {addDaysFromCalendarDate, today} from "../../date/CalendarDateType";

// $FlowFixMe[invalid-export]
const stories = storiesOf(`${sections.filter}/Conditional Filter`, module);
stories.addDecorator(withKnobs);
stories.add("Conditional Filter", () => <FilterHoist />);

function FilterHoist() {
  return (
    <Group flexDirection="column">
      {SearchableMultiTest(typeOptions, valueOptions)}
      {SelectTest(typeOptions, valueOptions)}
      {DateRangeTest(dateTypes, presets)}
      <Text>In Modal Test</Text>
      <Modal>{SearchableMultiTest(typeOptions, valueOptions)}</Modal>
      <AgainstWindowEdge edge="right">
        {SearchableMultiTest(typeOptions, valueOptions)}
      </AgainstWindowEdge>
      <AgainstWindowEdge edge="bottom">
        {SearchableMultiTest(typeOptions, valueOptions)}
      </AgainstWindowEdge>
    </Group>
  );
}

function SearchableMultiTest(
  types: {|options: Array<any>, label: string|},
  valueOptions: Array<any>
) {
  const [groupValue, setGroupValue] = React.useState();
  return (
    <ConditionalFilter
      label="MultiSelect Filter"
      onApply={vals => setGroupValue(vals)}
      showOperatorFilter={boolean("showIncludeFilter", true)}
      typeFilter={types}
      valueFilterRenderer={(_type, value, updateValue) => (
        <SearchableMultiselectFilter
          label="Shipper"
          options={valueOptions}
          onChange={val => {
            updateValue(val);
          }}
          value={value}
        />
      )}
      value={groupValue}
    />
  );
}

function DateRangeTest(
  types: {|options: Array<any>, label: string|},
  presets: Array<any>
) {
  const [groupValue, setGroupValue] = React.useState();
  const defaultValue = {type: "preset", ...presets[0]};
  return (
    <ConditionalFilter
      label="Date Range Filter"
      onApply={vals => setGroupValue(vals)}
      showOperatorFilter={false}
      typeFilter={types}
      valueFilterDefault={defaultValue}
      valueFilterRenderer={(_type, value, updateValue) => (
        <DateRangeFilter
          label="Range"
          value={value}
          onChange={val => updateValue(val)}
          presets={presets}
        />
      )}
      value={groupValue}
    />
  );
}

function SelectTest(
  types: {|options: Array<any>, label: string|},
  valueOptions: Array<any>
) {
  const [groupValue, setGroupValue] = React.useState();
  return (
    <ConditionalFilter
      label="Select Filter"
      onApply={vals => setGroupValue(vals)}
      typeFilter={types}
      valueFilterRenderer={(_type, value, updateValue) => (
        <SelectFilter
          label="Range"
          value={value}
          options={valueOptions}
          onChange={val => updateValue(val)}
        />
      )}
      value={groupValue}
    />
  );
}

const typeOptions = {
  options: [
    {
      label: "Air",
      value: "air",
    },
    {
      label: "Ocean",
      value: "ocean",
    },
    {
      label: "Trucking",
      value: "trucking",
    },
  ],
  label: "Shipment Type",
};

const valueOptions = [
  {
    label: "Shipping Company",
    value: {name: "Shipping Company", value: "shipping company"},
  },
  {label: "Company", value: {name: "Company", value: "company"}},
  {label: "Big Ships", value: {name: "Big Ships", value: "big ships"}},
  {label: "Boats", value: {name: "Boats", value: "boats"}},
];

const dateTypes = {
  label: "Event",
  options: [
    {
      label: "Delivery Date",
      value: "delivery date",
    },
    {
      label: "Pickup Date",
      value: "pickup date",
    },
    {
      label: "Ready Date",
      value: "ready date",
    },
    {
      label: "Inland Arrival",
      value: "inland arrival",
    },
  ],
};

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),
  },
];