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

import {storiesOf} from "@storybook/react";
import {boolean, select, withKnobs} from "@storybook/addon-knobs";
import sections from "../sections";
import PhoneNumberInput from "../../PhoneNumberInput";

const stories = storiesOf(`${sections.dataEntry}/Phone Number Input`, module);
stories.addDecorator(withKnobs);
stories.add("Phone Number Input", () => (
  <PhoneNumberInputLauncher {...getTextInputKnobs()} />
));

export const getTextInputKnobs = (): {|
  disabled: any,
  isInvalid: any,
  readOnly: any,
  size: any,
|} => ({
  disabled: boolean("disabled", false),
  readOnly: boolean("readOnly", false),
  size: select("size", ["s", "m", "l"], "m"),
  isInvalid: boolean("isInvalid", false),
});

const PhoneNumberInputLauncher = (props: {|
  +disabled: boolean,
  +isInvalid: boolean,
  +readOnly: boolean,
  +size: "s" | "m" | "l",
|}) => (
  <div>
    <PhoneNumberInput value="" onChange={() => {}} placeholder="" {...props} />
  </div>
);