import React from 'react';
import PropTypes from 'prop-types';

import DecorativeLink from '../../atoms/links/DecorativeLink';
import Image from '../../atoms/media/Image';
import Paragraph from '../../atoms/text/Paragraph';
import Icon from '../../base/Icon';
import './style.css';

var ImagePromo = function ImagePromo(props) {
  var HeadingElement = 'h' + (props.title.level || 2);
  var sectionClasses = ['ma__image-promo', props.stacked && 'ma__image-promo--stacked', props.small && 'ma__image-promo--small', props.location && props.location.map && 'js-location-listing-link'];
  var imagePromoHeader = React.createElement(
    'div',
    { className: 'ma__image-promo__header' },
    React.createElement(
      HeadingElement,
      { className: 'ma__image-promo__title' },
      props.tags && React.createElement(
        'div',
        { className: 'ma__image-promo__tags' },
        props.tags.map(function (tag) {
          return React.createElement(
            'span',
            { key: tag.id, title: tag.label, 'data-ma-tag-id': tag.id },
            tag.icon
          );
        })
      ),
      props.title ? React.createElement(DecorativeLink, props.title) : React.createElement(
        React.Fragment,
        null,
        props.title.text
      )
    ),
    props.subTitle && React.createElement(
      'h3',
      { className: 'ma__org-info__job-title' },
      props.subTitle
    )
  );
  return React.createElement(
    'section',
    { className: sectionClasses.join(' ') },
    React.createElement(
      'div',
      { className: 'ma__image-promo__image' },
      props.image && props.image.src && React.createElement(Image, props.image),
      props.stacked && imagePromoHeader
    ),
    React.createElement(
      'div',
      { className: 'ma__image-promo__details' },
      !props.stacked && imagePromoHeader,
      props.location && props.location.text && React.createElement(
        'div',
        { className: 'ma__image-promo__location' },
        props.location.text,
        props.link && props.link.text && React.createElement(
          'div',
          null,
          React.createElement(DecorativeLink, props.link)
        )
      ),
      props.phone && React.createElement(
        'div',
        { className: 'ma__image-promo__phone' },
        React.createElement(Icon, { name: 'phone' }),
        '\xA0',
        props.phone.href ? React.createElement(
          'a',
          { href: 'tel:' + props.phone.href },
          props.phone.text
        ) : React.createElement(
          'span',
          null,
          props.phone.text
        )
      ),
      props.description && React.createElement(
        'div',
        { className: 'ma__image-promo__description' },
        React.createElement(Paragraph, { text: props.description })
      ),
      props.link && !props.location && React.createElement(
        'div',
        { className: 'ma__image-promo__link' },
        React.createElement(DecorativeLink, props.link)
      )
    )
  );
};

ImagePromo.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.shape({
    level: PropTypes.number,
    href: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired
  }),
  tags: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    label: PropTypes.string,
    icon: PropTypes.element
  })),
  image: PropTypes.shape({
    src: PropTypes.string,
    alt: PropTypes.string,
    width: PropTypes.number,
    height: PropTypes.number
  }),
  /** Stack image and details */
  stacked: PropTypes.bool,
  /** Stack image and details */
  small: PropTypes.bool,
  /** Add a subtitle field below title */
  subTitle: PropTypes.string,
  description: PropTypes.string,
  link: PropTypes.shape({
    text: PropTypes.string,
    href: PropTypes.string,
    info: PropTypes.string
  }),
  location: PropTypes.shape({
    text: PropTypes.string,
    map: PropTypes.bool
  }),
  phone: PropTypes.shape({
    text: PropTypes.string.isRequired,
    href: PropTypes.string
  })
} : {};

export default ImagePromo;