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

import EmergencyHeader from '../../..';
import Icon from '../../base/Icon';
import { svgOptions } from '../../base/Icon/Icon.knob.options';

/* eslint-disable react/prop-types */
storiesOf('molecules', module).addDecorator(withKnobs({ escapeHTML: false })).add('EmergencyHeader', function () {
  var iconName = select('Icon: name', svgOptions, 'alert');
  var titleText = text('title', 'The State is experiencing severe weather due to the winter storm Paula.');
  var props = {
    title: function title(_ref) {
      var linkClasses = _ref.linkClasses;
      return React.createElement(
        'a',
        { className: linkClasses, href: 'https://www.mass.gov' },
        titleText
      );
    },
    theme: select('theme', {
      'c-warning (default)': 'c-warning',
      'c-primary': 'c-primary',
      'c-primary-alt': 'c-primary-alt',
      'c-error': 'c-error',
      'c-gray': 'c-gray'
    }, 'c-warning'),
    prefix: text('prefix', 'Emergency Alerts'),
    icon: !iconName ? null : React.createElement(Icon, { name: iconName })
  };
  return React.createElement(EmergencyHeader, props);
});