/**
 * TEAM: frontend_infra
 *
 * @flow
 */
import * as React from "react";
import {storiesOf} from "@storybook/react";
import {boolean, select, text, withKnobs} from "@storybook/addon-knobs";
import sections from "../sections";
import CountrySelector from "../../CountrySelector";

const stories = storiesOf(`${sections.dataEntry}/Country Selector`, module);
stories.addDecorator(withKnobs);
stories.add("Country Selector Input", () => (
  <CountrySelectorHoist {...getCountrySelectorKnobs()} />
));

export const getCountrySelectorKnobs = (): {|
  disabled: boolean,
  isInvalid: boolean,
  placeholder: string,
  size: "s" | "m" | "l",
|} => ({
  disabled: boolean("disabled", false),
  size: select("size", ["s", "m", "l"], "m"),
  isInvalid: boolean("isInvalid", false),
  placeholder: text("placeholder", "Starting value..."),
});

function CountrySelectorHoist(props: {|
  +disabled: boolean,
  +isInvalid: boolean,
  +placeholder: string,
  +size: "s" | "m" | "l",
|}) {
  const [selected, setSelected] = React.useState(null);
  return (
    <CountrySelector
      {...props}
      value={selected}
      onChange={value => setSelected(value)}
    />
  );
}