"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.examples = exports.suite = void 0;

var React = _interopRequireWildcard(require("react"));

var _addonKnobs = require("@storybook/addon-knobs");

var _styles = require("../styles");

var _button = require("../button");

var Icons = _interopRequireWildcard(require("./icon-exports"));

var _examples$SIMPLE_EXAM;

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var Centered = (0, _styles.styled)('div', {
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  height: '90vh'
});
var Grid = (0, _styles.styled)('div', function (_ref) {
  var $size = _ref.$size;
  return {
    display: 'grid',
    gridTemplateColumns: '20% 20% 20% 20% 20%',
    gridTemplateRows: '20% 20% 20% 20% 20%',
    width: "".concat($size, "px"),
    height: "".concat($size, "px")
  };
});
var Buttons = (0, _styles.styled)('div', {
  maxWidth: '600px'
});
var ButtonContainer = (0, _styles.styled)('div', {
  display: 'inline-block',
  margin: '6px'
});
var GridItem = (0, _styles.styled)('div', function (_ref2) {
  var row = _ref2.row,
      col = _ref2.col;
  return {
    alignSelf: 'center',
    justifySelf: 'center'
  };
});
var suite = 'Icon Suite';
exports.suite = suite;
var examples = {
  SIMPLE_EXAMPLE: 'Icon',
  BUTTON_EXAMPLE: 'Icons in Button'
};
exports.examples = examples;

var _default = (_examples$SIMPLE_EXAM = {}, _defineProperty(_examples$SIMPLE_EXAM, examples.SIMPLE_EXAMPLE, function Story1() {
  var size = (0, _addonKnobs.select)('Size', ['12px', '16px', '24px', '36px', '48px', '64px'], '48px');
  var sizeNum = parseInt(size);
  var hue = (0, _addonKnobs.number)('Color', 0, {
    range: true,
    min: 0,
    max: 360
  });
  var hsl = hue === 0 ? '#000' : "hsl(".concat(hue, ", 40%, 40%)");
  var numCols = 5;
  return React.createElement(Centered, null, React.createElement(Grid, {
    $size: // Plus two to add some extra padding between items
    sizeNum * (numCols + 2)
  }, Object.keys(Icons).map(function (key) {
    var Icon = Icons[key];
    return React.createElement(GridItem, {
      key: key
    }, React.createElement(Icon, {
      size: size,
      color: hsl
    }));
  })));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.BUTTON_EXAMPLE, function Story1() {
  var buttonKind = (0, _addonKnobs.select)('Button Kind', [_button.KIND.primary, _button.KIND.secondary, _button.KIND.tertiary, _button.KIND.minimal], _button.KIND.primary);
  return React.createElement(Centered, null, React.createElement(Buttons, null, Object.keys(Icons).map(function (key) {
    var Icon = Icons[key];
    return React.createElement(ButtonContainer, {
      key: key
    }, React.createElement(_button.Button, {
      kind: buttonKind,
      endEnhancer: function endEnhancer() {
        return React.createElement(Icon, null);
      }
    }, Icon.name));
  })));
}), _examples$SIMPLE_EXAM);

exports.default = _default;