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

import CalloutAlert from './index';
import CalloutAlertDocs from './CalloutAlert.md';
import { svgOptions } from '../../base/Icon/Icon.knob.options';
import Paragraph from '../../atoms/text/Paragraph';
import OrderedList from '../../atoms/lists/OrderedList';
import DecorativeLink from '../../atoms/links/DecorativeLink';

var themeOptions = {
  'c-highlight (default)': '',
  'c-primary': 'c-primary',
  'c-primary-alt': 'c-primary-alt',
  'c-gray-dark': 'c-gray-dark',
  'c-error-red': 'c-error-red',
  'c-white': 'c-white'
};

storiesOf('organisms/CalloutAlert', module).addDecorator(withKnobs({ escapeHTML: false })).add('CalloutAlert', function () {
  var name = select('CalloutAlert icon: name', svgOptions, '');
  var theme = select('theme', themeOptions, '');
  var calloutAlertProps = {
    icon: { name: name, ariaHidden: true },
    theme: theme
  };
  return React.createElement(
    CalloutAlert,
    calloutAlertProps,
    React.createElement(
      Paragraph,
      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.'
    ),
    React.createElement(OrderedList, null),
    React.createElement(DecorativeLink, null)
  );
}, { info: CalloutAlertDocs }).add('CalloutAlert with real data', function () {
  var calloutAlertProps = {
    icon: { name: 'alert', ariaHidden: true },
    theme: 'c-primary'
  };
  return React.createElement(
    CalloutAlert,
    calloutAlertProps,
    React.createElement(Paragraph, { text: '<strong>You are required to remit payment to the department starting 7/1.</strong> Because you have more than 25 total employees in Massachusetts.' }),
    React.createElement(Paragraph, { text: '<strong>You are required to remit payment on behalf of your contractors.</strong> For employers with over 50% their workforce made up of 1099s need to consider these as full time employees under the new language.' })
  );
}, { info: CalloutAlertDocs });