'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _react3 = require('@storybook/react');

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

var _IconKnob = require('./Icon.knob.options');

var _index = require('./index');

var _index2 = _interopRequireDefault(_index);

var _IconDisplay = require('./IconDisplay');

var _IconDisplay2 = _interopRequireDefault(_IconDisplay);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _react3.storiesOf)('brand|icons', module).addDecorator((0, _addonKnobs.withKnobs)({ escapeHTML: false })).add('Icon', function () {
  // This needs to be dynamic somehow.

  var name = (0, _addonKnobs.select)('name', _IconKnob.svgOptions, 'alert');
  var svgWidth = (0, _addonKnobs.text)('svgWidth', 40);
  var svgHeight = (0, _addonKnobs.text)('svgHeight', 40);
  var title = (0, _addonKnobs.text)('title', 'Icon Title Here');
  var classes = (0, _addonKnobs.array)('classes', ['']);
  var ariaHidden = (0, _addonKnobs.boolean)('ariaHidden', false);
  var fill = (0, _addonKnobs.color)('fill color', '#000');
  var props = {
    name: name,
    svgWidth: svgWidth,
    svgHeight: svgHeight,
    title: title,
    classes: classes,
    ariaHidden: ariaHidden,
    fill: fill
  };
  if (window.location.search.indexOf('backstop') > -1) {
    return Object.entries(_IconKnob.assets).map(function (_ref) {
      var key = _ref[0];

      var backstopProps = {
        key: key,
        name: key,
        svgWidth: svgWidth,
        svgHeight: svgHeight,
        title: title
      };
      return _react2.default.createElement(_index2.default, backstopProps);
    });
  }
  return _react2.default.createElement(_index2.default, props);
});

(0, _react3.storiesOf)('brand|icons', module).addDecorator((0, _addonKnobs.withKnobs)({ escapeHTML: false })).add('All Icons', function () {
  var svgWidth = (0, _addonKnobs.number)('svgWidth', 40);
  var svgHeight = (0, _addonKnobs.number)('svgHeight', 40);
  var title = (0, _addonKnobs.text)('title', 'Icon Title Here');
  var classes = (0, _addonKnobs.array)('classes', ['']);
  var ariaHidden = (0, _addonKnobs.boolean)('ariaHidden', false);
  var fill = (0, _addonKnobs.color)('fill color', '#000');
  var allIconProps = Object.keys(_IconKnob.assets).map(function (key) {
    return {
      key: key,
      name: key,
      svgWidth: svgWidth,
      svgHeight: svgHeight,
      title: title,
      classes: classes,
      ariaHidden: ariaHidden,
      fill: fill
    };
  });
  return _react2.default.createElement(
    'ul',
    { className: 'sg-icons' },
    allIconProps.map(function (iconProp) {
      return _react2.default.createElement(_IconDisplay2.default, _extends({}, iconProp, { key: 'icon_' + iconProp.key }));
    })
  );
});