import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs, select, boolean as _boolean } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";
import ButtonIcon from "./index";
import Container from "../Layout/Container";
import Row from "../Layout/Row";
import Col from "../Layout/Col";
import { smokeLight } from "../../tokens/forimport/index.es";
import { FILL_COLOR_MAP } from "../../utils/accessibility"; // build fillColorName options for a select/dropdown knob

var fillColorOptions = {
  None: ""
};
Object.keys(FILL_COLOR_MAP).forEach(function (color) {
  fillColorOptions[color] = color;
});
var stories = storiesOf("Forms|Buttons/ButtonIcon", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview"
  }, React.createElement(Container, {
    paddedContent: "around"
  }, story()));
});
stories.add("Default", function () {
  return React.createElement(Row, {
    style: {
      background: "".concat(smokeLight)
    },
    displayVertical: true
  }, React.createElement(Col, {
    small: "fillSpace",
    paddedContent: "around"
  }, React.createElement(ButtonIcon, {
    iconName: "arrow-left",
    isDisabled: _boolean("isDisabled", false),
    onClick: action("I have been clicked"),
    title: "Previous",
    size: select("size", {
      small: "small",
      medium: "medium",
      large: "large"
    }, "small")
  }), React.createElement("span", {
    className: "push--left"
  }, "Default (no style prop applied)")), React.createElement(Col, {
    small: "fillSpace",
    paddedContent: "around"
  }, React.createElement(ButtonIcon, {
    iconName: "arrow-right",
    isDisabled: _boolean("isDisabled", false),
    onClick: action("I have been clicked"),
    size: select("size", {
      small: "small",
      medium: "medium",
      large: "large"
    }, "small"),
    style: "highlight",
    title: "Next"
  }), React.createElement("span", {
    className: "push--left"
  }, "Highlight")), React.createElement(Col, {
    small: "fillSpace",
    paddedContent: "around"
  }, React.createElement(ButtonIcon, {
    iconName: "close",
    isDisabled: _boolean("isDisabled", false),
    onClick: action("I have been clicked"),
    size: select("size", {
      small: "small",
      medium: "medium",
      large: "large"
    }, "small"),
    style: "outline",
    title: "Close Dialog"
  }), React.createElement("span", {
    className: "push--left"
  }, "Outline")), React.createElement(Col, {
    small: "fillSpace",
    paddedContent: "around"
  }, React.createElement(ButtonIcon, {
    iconName: "add",
    isDisabled: _boolean("isDisabled", false),
    onClick: action("I have been clicked"),
    size: select("size", {
      small: "small",
      medium: "medium",
      large: "large"
    }, "small"),
    style: "danger",
    title: "Add row"
  }), React.createElement("span", {
    className: "push--left"
  }, "Danger")), React.createElement(Col, {
    small: "fillSpace",
    paddedContent: "around"
  }, React.createElement(ButtonIcon, {
    iconName: "minus",
    isDisabled: _boolean("isDisabled", false),
    onClick: action("I have been clicked"),
    size: select("size", {
      small: "small",
      medium: "medium",
      large: "large"
    }, "small"),
    style: "danger-outline",
    title: "delete row"
  }), React.createElement("span", {
    className: "push--left"
  }, "Danger-outline")), React.createElement(Col, {
    small: "fillSpace",
    paddedContent: "around"
  }, React.createElement(ButtonIcon, {
    iconName: "ellipsis",
    isDisabled: _boolean("isDisabled", false),
    onClick: action("I have been clicked"),
    size: select("size", {
      small: "small",
      medium: "medium",
      large: "large"
    }, "small"),
    style: "plain",
    title: "More options"
  }), React.createElement("span", {
    className: "push--left"
  }, "Plain")), React.createElement(Col, {
    small: "auto"
  }, React.createElement(ButtonIcon, {
    iconFill: select("iconFill", fillColorOptions, "green"),
    iconName: "ellipsis",
    isDisabled: _boolean("isDisabled", false),
    onClick: action("I have been clicked"),
    size: select("size", {
      small: "small",
      medium: "medium",
      large: "large"
    }, "small"),
    style: "plain",
    title: "More options"
  }), React.createElement("span", {
    className: "push--left"
  }, "Plain with iconFill")));
});