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

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

import sections from "../sections";

import Status from "../../Status";
import Group from "../../Group";

// $FlowFixMe[invalid-export]
const stories = storiesOf(`${sections.dataDisplay}/Status`, module);
stories.addDecorator(withKnobs);

stories.add("Status", () => {
  const size = select("Size", ["xs", "s", "m", "l"], "m");

  return (
    <Group flexDirection="column">
      <Group>
        <Group flexDirection="column">
          <Status size={size} intent="pending" />
          <Status size={size} intent="active" />
          <Status size={size} intent="error" />
          <Status size={size} intent="done" />
          <Status size={size} intent="complete" />
          <Status size={size} intent="due-soon" />
        </Group>
        <Group flexDirection="column">
          <Status size={size} intent="pending" kind="bare" />
          <Status size={size} kind="bare" intent="active" />
          <Status size={size} kind="bare" intent="error" />
          <Status size={size} kind="bare" intent="done" />
          <Status size={size} kind="bare" intent="complete" />
          <Status size={size} kind="bare" intent="due-soon" />
        </Group>
      </Group>
      <Status size={size} intent="active">
        Custom Text Example
      </Status>
    </Group>
  );
});