/**
 * TEAM: frontend_infra
 *
 * @flow
 */
import * as React from "react";
import {storiesOf} from "@storybook/react";
import {text, boolean, withKnobs} from "@storybook/addon-knobs";
import sections from "../sections";
import Multiselect, {type Option} from "../../select/MultiselectInput";
import Label from "../../Label";
import DeprecatedToastActions from "../../toast/DeprecatedToastActions";
import DeprecatedConnectedToaster from "../../toast/DeprecatedConnectedToaster";

export const getMultiselectKnobs = (): {|
  disabled: any,
  isInvalid: any,
  showFocusCallbacks: any,
  someSelectedUnits: any,
|} => ({
  disabled: boolean("disabled", false),
  isInvalid: boolean("isInvalid", false),
  someSelectedUnits: text("someSelectedUnits", undefined),
  showFocusCallbacks: boolean("showFocusCallbacks", false),
});

type Props = {|
  disabled: boolean,
  isInvalid: boolean,
  someSelectedUnits: string,
|};

const options = [
  {
    value: {not_key: "id1"},
    label: "First option",
    disabled: false,
    iconName: "satellite",
  },
  {
    value: {not_key: "id2"},
    label: "Second option",
    disabled: false,
    iconName: "cancel",
  },
  {
    value: {not_key: "id3"},
    label: "Third option",
    disabled: false,
    iconName: "ship",
  },
  {
    value: {not_key: "id4"},
    label: "Fourth option",
    disabled: false,
    iconName: "ship",
  },
];
const optionsWithDisabled = options.concat({
  value: {not_key: "id5"},
  label: "Fifth option",
  disabled: true,
  iconName: "rail",
});

function MultiselectInputStory<K>({
  name,
  initialValues,
  showFocusCallbacks,
  options,
  props,
}: $ReadOnly<{|
  name: string,
  initialValues: $ReadOnlyArray<K>,
  showFocusCallbacks: boolean,
  options: $ReadOnlyArray<Option<K>>,
  props: Props,
|}>) {
  // initial value is whatever is the second option
  const [values, setValues] = React.useState(initialValues);

  const handleRecordChange = (
    values: $ReadOnlyArray<{not_key: string, ...}>
  ) => {
    setValues(values);
  };

  const handleOnBlur = () => {
    if (showFocusCallbacks) {
      DeprecatedToastActions.show(
        {intent: "success", message: "OnBlur triggered"},
        1000
      );
    }
  };

  const handleOnFocus = () => {
    if (showFocusCallbacks) {
      DeprecatedToastActions.show(
        {intent: "success", message: "OnFocus triggered"},
        1000
      );
    }
  };

  return (
    <div style={{width: 200, margin: 20}}>
      <DeprecatedConnectedToaster />
      <Label value={name}>
        <Multiselect
          value={values}
          options={options}
          onChange={handleRecordChange}
          onBlur={handleOnBlur}
          onFocus={handleOnFocus}
          toKeyFn={option => option?.not_key}
          {...props}
        />
      </Label>
    </div>
  );
}

const stories = storiesOf(`${sections.dataEntry}/MultiSelect Input`, module);
stories.addDecorator(withKnobs);
stories.add("MultiselectInput", () => {
  const {showFocusCallbacks, ...props} = getMultiselectKnobs();

  return (
    <>
      <MultiselectInputStory
        name="with many options"
        initialValues={[options[2].value]}
        options={options}
        showFocusCallbacks={showFocusCallbacks}
        props={props}
      />

      <MultiselectInputStory
        name="with many options, one disabled"
        initialValues={[options[2].value]}
        options={optionsWithDisabled}
        showFocusCallbacks={showFocusCallbacks}
        props={props}
      />

      <MultiselectInputStory
        name="with two options"
        initialValues={[options[1].value]}
        options={options.slice(0, 2)}
        showFocusCallbacks={showFocusCallbacks}
        props={props}
      />
      <MultiselectInputStory
        name="with no options"
        initialValues={[]}
        options={[]}
        showFocusCallbacks={showFocusCallbacks}
        props={props}
      />
    </>
  );
});