import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text, select, array } from '@storybook/addon-knobs';

import { svgOptions } from '../../base/Icon/Icon.knob.options';
import IconLink from '../../..';
import { Icon, Link } from '../../../index';

storiesOf('molecules', module).addDecorator(withKnobs({ escapeHTML: false })).add('IconLink', function () {
  var linkProps = {
    info: text('Link: info', 'Title info here', 'Link'),
    text: text('Link: text', 'Lorem ipsum dolor sit amet', 'Link'),
    href: text('Link: href', '#', 'Link')
  };
  var iconProps = {
    name: select('Icon: name', svgOptions, '', 'Icon'),
    svgWidth: text('Icon: svgWidth', 13, 'Icon'),
    svgHeight: text('Icon: svgHeight', 13, 'Icon'),
    title: text('Icon: title', 'Icon Title Here', 'Icon'),
    classes: array('Icon: classes', ['ma__general-teaser__secondaryicon'], ' ', 'Icon')
  };
  var props = {
    icon: React.createElement(Icon, iconProps),
    wrapperClasses: array('IconLink: wrapperClasses', ['']),
    link: React.createElement(Link, linkProps)
  };
  return React.createElement(IconLink, props);
});