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

import * as React from "react";
import {action} from "@storybook/addon-actions";
import {storiesOf} from "@storybook/react";
import {boolean, withKnobs} from "@storybook/addon-knobs";
import sections from "../sections";
import SearchableMultiselectFilter from "../../filter/SearchableMultiselectFilter";

const getKnobs = () => ({
  clearable: boolean("clearable", false),
  disabled: boolean("isDisabled", false),
  displaySelectAllButton: boolean("displaySelectAllButton", true),
});

type StarWarsChar = {
  name: string,
  side: string,
  ...
};

type CharacterList = $ReadOnlyArray<StarWarsChar>;

const options = [
  {
    name: "Anakin Skywalker",
    side: "Rebel Alliance",
  },
  {
    name: "Darth Vader",
    side: "Empire",
  },
  {
    name: "Yoda",
    side: "Rebel Alliance",
  },
  {
    name: "Obi Wan",
    side: "Rebel Alliance",
  },
  {
    name: "Emperor Palpatine",
    side: "Empire",
  },
];

function SearchableMultiSelectFilterStory({
  options,
}: {
  +options: CharacterList,
  ...
}) {
  const parsedOptions = options.map(option => ({
    label: option.name,
    value: option,
  }));

  const [values, setValues] = React.useState<CharacterList>([]);

  const handleChange = (newSelectedValues: CharacterList) => {
    action("Selected")(newSelectedValues);

    setValues(newSelectedValues);
  };

  const handleRemove = () => {
    action("Cleared")();
    setValues([]);
  };

  return (
    <SearchableMultiselectFilter
      label="Favorite Star Wars character(s)"
      value={values}
      options={parsedOptions}
      onChange={handleChange}
      onRemove={handleRemove}
    />
  );
}

const stories = storiesOf(
  `${sections.filter}/SearchableMultiSelect Filter`,
  // $FlowFixMe[invalid-export]
  module
);
stories.addDecorator(withKnobs);
stories.add("three or fewer options", () => (
  <SearchableMultiSelectFilterStory
    {...getKnobs()}
    options={options.slice(0, 3)}
  />
));

stories.add("more than three options", () => (
  <SearchableMultiSelectFilterStory {...getKnobs()} options={options} />
));