'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

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

var _index2 = _interopRequireDefault(_index);

var _AccordionWrapper = require('./AccordionWrapper.md');

var _AccordionWrapper2 = _interopRequireDefault(_AccordionWrapper);

var _AccordionItem = require('../../molecules/AccordionItem');

var _AccordionItem2 = _interopRequireDefault(_AccordionItem);

var _Icon = require('../../base/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _Paragraph = require('../../atoms/text/Paragraph');

var _Paragraph2 = _interopRequireDefault(_Paragraph);

var _OrderedList = require('../../atoms/lists/OrderedList');

var _OrderedList2 = _interopRequireDefault(_OrderedList);

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

var getIcon = function getIcon(iconProps) {
  return _react2.default.createElement(_Icon2.default, iconProps);
};

var icons = {
  circlechevron: getIcon({ name: 'circlechevron' }),
  laptop: getIcon({ name: 'laptop' }),
  phone: getIcon({ name: 'phone' }),
  fax: getIcon({ name: 'fax' }),
  none: null
};

(0, _react3.storiesOf)('organisms', module).addDecorator((0, _addonKnobs.withKnobs)({ escapeHTML: false })).add('AccordionWrapper', function () {
  var AccordionItem1Props = {
    title: (0, _addonKnobs.text)('Accordion1 title', 'Collapsible Header One', 'Accordion1'),
    info: (0, _addonKnobs.text)('Accordion1 info', 'Collapsible Header One', 'Accordion1'),
    icon: (0, _addonKnobs.select)('Accordion1 icon', Object.keys(icons), 'circlechevron', 'Accordion1'),
    id: (0, _addonKnobs.text)('id', 'accordionid1')
  };
  var AccordionItem2Props = {
    title: (0, _addonKnobs.text)('Accordion2 title', 'Collapsible Header Two', 'Accordion2'),
    info: (0, _addonKnobs.text)('Accordion2 info', 'Collapsible Header Two', 'Accordion2'),
    icon: (0, _addonKnobs.select)('Accordion2 icon', Object.keys(icons), 'laptop', 'Accordion2'),
    id: (0, _addonKnobs.text)('id', 'accordionid2')
  };
  var AccordionWrapperProps = {
    border: (0, _addonKnobs.boolean)('border', true),
    secondary: (0, _addonKnobs.boolean)('secondary', false),
    emphasize: (0, _addonKnobs.boolean)('emphasize', true),
    headerLevel: (0, _addonKnobs.select)('headerLevel', [1, 2, 3, 4, 5, 6], 2),
    id: (0, _addonKnobs.text)('id', 'accordionid3')
  };

  // Set the icon prop to the actual element based on knob selection.
  AccordionItem1Props.icon = icons[AccordionItem1Props.icon];
  AccordionItem2Props.icon = icons[AccordionItem2Props.icon];

  return _react2.default.createElement(
    _index2.default,
    AccordionWrapperProps,
    _react2.default.createElement(
      _AccordionItem2.default,
      AccordionItem1Props,
      _react2.default.createElement(
        _Paragraph2.default,
        null,
        'A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.'
      )
    ),
    _react2.default.createElement(
      _AccordionItem2.default,
      AccordionItem2Props,
      _react2.default.createElement(_OrderedList2.default, null)
    )
  );
}, { info: _AccordionWrapper2.default });