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

import {StyleSheet, css} from "aphrodite";
import {storiesOf} from "@storybook/react";
import {text, boolean, withKnobs} from "@storybook/addon-knobs";
import sections from "../sections";
import Button from "../../button/Button";
import EmptyState from "../../EmptyState";
import type {GraphicIcons} from "../../tools/graphicIcons";

// $FlowFixMe[invalid-export]
const stories = storiesOf(`${sections.interaction}/EmptyState`, module);
stories.addDecorator(withKnobs);
stories.add("Empty State", () => (
  <div className={css(styles.container)}>
    <EmptyStateHoist {...getEmptyStateKnobs()} />
  </div>
));

function EmptyStateHoist({
  icon,
  headline,
  body,
  showCallToAction,
}: {|
  +body: string,
  +headline: string,
  +icon: GraphicIcons,
  +showCallToAction: boolean,
|}) {
  const button = <Button>Do The Thing!</Button>;
  return (
    <EmptyState
      icon={icon}
      headline={headline}
      body={body}
      // $FlowFixMe[incompatible-type]: callToAction={false} is not a valid prop
      callToAction={showCallToAction && button}
    />
  );
}

const getEmptyStateKnobs = () => ({
  headline: text("Headline", "This is the sentence headline"),
  body: text(
    "Body",
    "You should do the thing because the thing needs to be done"
  ),
  icon: text("GraphicIcon", "shipments_none"),
  showCallToAction: boolean("include call to action button", true),
});

const styles = StyleSheet.create({
  container: {
    width: "600px",
    height: "600px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
});