import React from 'react';
import PropTypes from 'prop-types';
import DecorativeLink from '../../atoms/links/DecorativeLink';
import Icon from '../../base/Icon';
import './style.css';

var ContactGroup = function ContactGroup(contactGroup) {
  var icons = {
    SvgMarker: React.createElement(Icon, { name: 'marker' }), SvgPhone: React.createElement(Icon, { name: 'phone' }), SvgLaptop: React.createElement(Icon, { name: 'laptop' }), SvgFax: React.createElement(Icon, { name: 'fax' })
  };
  var Element = 'h' + (contactGroup.level ? contactGroup.level : 2);
  var createItems = function createItems(item) {
    switch (item.type) {
      case 'online':
        return React.createElement(DecorativeLink, item.link);
      case 'phone':
        return React.createElement(
          'a',
          { href: 'tel:' + item.link.href, className: 'ma__content-link ma__content-link--phone' },
          item.link.text
        );
      case 'email':
        return React.createElement(
          'a',
          { href: 'mailto:' + item.link.href, className: 'ma__content-link' },
          item.link.text
        );
      case 'address':
        return React.createElement(
          React.Fragment,
          null,
          React.createElement('div', { className: 'ma__contact-group__address', dangerouslySetInnerHTML: { __html: item.address } }),
          item.link.href && React.createElement(
            'div',
            { className: 'ma__contact-group__directions' },
            React.createElement(DecorativeLink, item.link)
          )
        );
      default:
        return React.createElement(
          'span',
          { className: 'ma__contact-group__value' },
          item.link.text
        );
    }
  };
  return React.createElement(
    'div',
    { className: 'ma__contact-group' },
    contactGroup.name && contactGroup.icon && React.createElement(
      Element,
      { className: 'ma__contact-group__name' },
      icons[contactGroup.icon],
      React.createElement(
        'span',
        null,
        contactGroup.name
      )
    ),
    contactGroup.items && contactGroup.items.map(function (item, itemIndex) {
      return (
        /* eslint-disable-next-line react/no-array-index-key */
        React.createElement(
          React.Fragment,
          { key: 'contactGroup.item.' + itemIndex },
          React.createElement(
            'div',
            { className: 'ma__contact-group__item' },
            item.label && React.createElement(
              'span',
              { className: 'ma__contact-group__label' },
              item.label
            ),
            createItems(item)
          ),
          item.details && React.createElement(
            'p',
            { className: 'ma__contact-group__details' },
            item.details
          )
        )
      );
    })
  );
};

ContactGroup.propTypes = process.env.NODE_ENV !== "production" ? {
  /** icon to pass to the contact group */
  icon: PropTypes.oneOf(['SvgMarker', 'SvgPhone', 'SvgLaptop', 'SvgFax']),
  /** The heading text  */
  text: PropTypes.string,
  /** The name of the contact info */
  name: PropTypes.oneOf(['Phone', 'Online', 'Fax', 'Address']),
  /** The heading level, default is 2 */
  level: PropTypes.number,
  /** A set of contact info items */
  items: PropTypes.arrayOf(PropTypes.shape({
    type: PropTypes.oneOf(['phone', 'online', 'email', 'address']),
    label: PropTypes.string,
    address: PropTypes.string,
    link: PropTypes.shape(DecorativeLink.props),
    details: PropTypes.string
  }))
} : {};

export default ContactGroup;