'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _PageHeader = require('../PageHeader');

var _PageHeader2 = _interopRequireDefault(_PageHeader);

var _PublishState = require('../../atoms/text/PublishState');

var _PublishState2 = _interopRequireDefault(_PublishState);

require('./style.css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var IllustratedHeader = function IllustratedHeader(illustratedHeader) {
  var bgInfo = illustratedHeader.bgInfo,
      bgImage = illustratedHeader.bgImage,
      inverted = illustratedHeader.inverted,
      category = illustratedHeader.category,
      pageHeader = illustratedHeader.pageHeader,
      publishState = illustratedHeader.publishState,
      children = illustratedHeader.children;

  var imageAlt = bgInfo || '';
  var pageHeaderProps = pageHeader;
  var illustratedHeaderClass = inverted ? 'ma__illustrated-header--inverted' : '';
  return _react2.default.createElement(
    'section',
    { className: 'ma__illustrated-header ' + illustratedHeaderClass },
    _react2.default.createElement(
      'div',
      { className: 'ma__illustrated-header__container' },
      _react2.default.createElement(
        'div',
        { className: 'ma__illustrated-header__content' },
        publishState && publishState.text && _react2.default.createElement(
          'div',
          { className: 'ma__page-header__publish-state' },
          _react2.default.createElement(_PublishState2.default, publishState)
        ),
        _react2.default.createElement(
          'div',
          { className: 'ma__illustrated-header__category', 'aria-hidden': 'true' },
          category
        ),
        _react2.default.createElement(_PageHeader2.default, pageHeaderProps),

        // Allows IllustratedHeader to render custom children component (this feature is used in rideshare report and it's not in Mayflower PatternLab)
        children
      )
    ),
    bgImage ? _react2.default.createElement('div', {
      style: { backgroundImage: 'url(' + bgImage + ')' },
      className: 'ma__illustrated-header__image',
      role: 'img',
      'aria-label': imageAlt
    }) : _react2.default.createElement('div', { className: 'ma__illustrated-header__image ma__illustrated-header__image--empty' })
  );
};

// import child components


IllustratedHeader.propTypes = process.env.NODE_ENV !== "production" ? {
  /** background image aria label */
  bgInfo: _propTypes2.default.string,
  /** background image url */
  bgImage: _propTypes2.default.string,
  /** invert to change style */
  inverted: _propTypes2.default.bool,
  /** category prefix text rendered in all caps above the page header title */
  category: _propTypes2.default.string,
  /** render PageHeader component @organisms/PageHeader */
  pageHeader: _propTypes2.default.shape(_PageHeader2.default.propTypes)
} : {};

exports.default = IllustratedHeader;
module.exports = exports['default'];