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

import * as React from "react";
import ConditionalFilter from "../ConditionalFilter";
import SearchableMultiselectFilter from "../SearchableMultiselectFilter";

import {characters} from "../../tools/demo";

/**
 * @title Basic Usage of Conditional Filter
 * @description Allows multiple SearchableMultiselectFilters to be used in one dropdown.
 */
export default function ConditionalFilterBasic(): React.Node {
  const [values, setValues] = React.useState();
  const options = characters.map(character => ({
    label: `${character.name} - ${character.team}`,
    value: character,
  }));
  const types = {
    label: "Team",
    options: [
      {label: "Rebel Alliance", value: "Rebel Alliance"},
      {label: "Empire", value: "Empire"},
    ],
  };
  return (
    <ConditionalFilter
      label="Conditional Filter"
      onApply={vals => setValues(vals)}
      showOperatorFilter={true}
      typeFilter={types}
      value={values}
      valueFilterRenderer={(type, value, updateValue) => (
        <SearchableMultiselectFilter
          label="Star Wars Characters"
          options={options.filter(o => o.label.includes(type))}
          onChange={val => updateValue(val)}
          value={value}
        />
      )}
    />
  );
}