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

import * as React from "react";
import {omit} from "lodash";
import {action} from "@storybook/addon-actions";
import {storiesOf} from "@storybook/react";
import {boolean, withKnobs} from "@storybook/addon-knobs";
import sections from "../sections";
import MultiselectFilter, {type ValueObj} from "../../filter/MultiselectFilter";
import Text from "../../Text";

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

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

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

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

const defaultState = {
  value: {type: "specificValues", specificValues: []},
};

// eslint-disable-next-line import/prefer-default-export
export class FilterHoist extends React.Component<
  {
    +clearable: boolean,
    +disabled: boolean,
    ...
  },
  {value: ValueObj<StarWarsChar>, ...}
> {
  constructor() {
    super();
    this.state = {
      ...defaultState,
    };
  }

  handleChange: (value: ValueObj<StarWarsChar>) => void = (
    value: ValueObj<StarWarsChar>
  ) => {
    action("Selected")(value);
    this.setState({value});
  };

  handleRemove: () => void = () => {
    action("Cleared")();
    this.setState({value: {type: "unfiltered", showAs: "noneSelected"}});
  };

  render(): React.Element<"div"> {
    const parsedOptions = options.map(option => ({
      label: option.name,
      value: option,
    }));
    return (
      <div>
        <Text>Three or less options</Text>
        <MultiselectFilter
          {...omit(this.props, "clearable")}
          label="This is a large label"
          value={this.state.value}
          options={parsedOptions.slice(0, 3)}
          onChange={this.handleChange}
          onRemove={this.props.clearable ? this.handleRemove : null}
        />
        <Text>More than three options</Text>
        <MultiselectFilter
          {...omit(this.props, "clearable")}
          label="This is a large label"
          value={this.state.value}
          options={parsedOptions}
          onChange={this.handleChange}
          onRemove={this.props.clearable ? this.handleRemove : null}
        />
      </div>
    );
  }
}